onblur on input field makes popup unclickable - javascript

function showSuggestions(){
let searchableModulesDiv = document.getElementById('searchableModules');
searchableModulesDiv.classList.remove('d-none');
}
function hideSuggestions(){
let searchableModulesDiv = document.getElementById('searchableModules');
searchableModulesDiv.classList.add('d-none');
}
function filterSuggestions() {
}
.prj-searchable-modules{
position:fixed;
margin-top: 70px;
z-index: 2;
width:100%;
}
.d-none {
display: none;
}
<form id="searchBar" class="w-100 d-inline-flex">
<!-- ... icons, labels, etc -->
<input type="text" class="form-control" id="searchInput" placeholder="Module search..."
onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>
<div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules d-none">
<ul class="nav flex-column">
<li class="nav-item text-start">
<a class="nav-link" href="calendar.html">
<i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a>
</li>
<!-- ... more li items -->
</ul>
</div>
I have a quick search bar in my website which when clicked shows a list clicable links.
The problem I'm facing is that clicking a link does nothing, and that's because I think the search bar loses focus as soon as I click the link, and so the actual "click" happens after the link already disappeared.
Any suggestion is appreciated, even if it's a different approach (possibly without using external plugins).
I'm using Bootstrap 5 and plain JS at the moment.

You can use setTimeout to postpone the hiding after the click event. Also, if you do not want to hide the list if an item is clicked, then you could simply add a conditional for the blur.
function showSuggestions(){
let searchableModulesDiv = document.getElementById('searchableModules');
searchableModulesDiv.classList.remove('d-none');
}
function hideSuggestions(){
setTimeout(() => {
let searchableModulesDiv = document.getElementById('searchableModules');
searchableModulesDiv.classList.add('d-none');
}, 100);
}
function filterSuggestions() {
}
.prj-searchable-modules{
position:fixed;
margin-top: 70px;
z-index: 2;
width:100%;
}
div.d-none > #searchableModules {
display: none;
}
<form id="searchBar" class="w-100 d-inline-flex">
<!-- ... icons, labels, etc -->
<input type="text" class="form-control" id="searchInput" placeholder="Module search..."
onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>
<div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules" onclick="console.log('clicked'); hideSuggestions();">
<ul class="nav flex-column">
<li class="nav-item text-start">
<a class="nav-link" href="#">
<i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a>
</li>
<!-- ... more li items -->
</ul>
</div>

If you place the search bar and search modules in the same parent-element, you can just use CSS.
.search-ctr:focus-within #searchableModules {
display:block;
}
#searchableModules {
display: none;
}
<div class='search-ctr'>
<form id="searchBar" class="w-100 d-inline-flex">
<!-- ... icons, labels, etc -->
<input type="text" class="form-control" id="searchInput" placeholder="Module search..."
onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>
<div id="searchableModules" class="card shadow-sm border-secondary rounded-3 prj-searchable-modules d-none">
<ul class="nav flex-column">
<li class="nav-item text-start">
<a class="nav-link" href="calendar.html">
<i class="fas fa-calendar-alt fa-fw"></i><span class="ps-3">Calendar</span></a>
</li>
<!-- ... more li items -->
</ul>
</div>

Related

Get direct children Elements at any depth

I'm working on a Comments system whose listing has, in its essence, the following format:
body {
font-size: 1.15rem;
}
.comment {
display: flex;
padding: 1rem;
}
.comment .message {
margin: 0 1rem;
}
.comment .replies {
margin-left: 15px;
}
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon.dots {
cursor: pointer;
height: 1.5rem;
width: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row comment" data-author="author1">
<div class="col w-175 message">
#author1 - Lorem ipsum dolor
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author2">
<div class="col w-175 message">
#author2 - Reply #1
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author1">
<div class="col w-175 message">
#author1 - Reply #2
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author2">
<div class="col w-175 message">
#author2 - Reply #3
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<svg id="dots" viewBox="0 0 24 24">
<path d="M12 16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM10.5 12c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5zm0-6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5z"/>
</svg>
</div>
</svg>
As you can see, comments have an identifier data-attribute with authors' usernames and each Comment has a toolbox of sorts, which I've simplified to one action here.
In this simple example, when the User clicks the *Follow entry, it should flip all of Bootstrap's d-none class on .follow and .unfollow on all toolboxes belonging to that author, so it's possible to Follow/Unfollow without reloading the Page.
Initially, I tried:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $toolbox = $( sprintf( '[data-author="%s"] .tools', username ) );
sprintf() is a 3rd-party component because I honestly don't really like Template Literals
An honest attempt, but when I wrote it I forgot that this would also bring all matching Elements from child selectors. For example, if the variable username above had the value author1, entries on author2 toolbox would also be changed.
Then I've narrowed the selector:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $comment = $( sprintf( '[data-author="%s"] .tools', username ) );
const $toolbox = $comment.children().find( '.tools' );
While it solved the previous problem, it created a new one: now entries nested within .replies, even those that DID match the data-attribute, would not change.
Then I tried something silly:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $comments = $( sprintf( '[data-author="%s"]', username ) );
$comments.each( ( _offset, comment ) => {
const $this = $( comment );
const $toolbox = $this.children().find( '.tools' );
$toolbox.find( 'li.follow' )
.addClass( 'd-none' )
.siblings( 'li.unfollow' )
.removeClass( 'd-none' );
});
And it worked perfectly, but I'm executing the same instructions over and over and over again N times as the data-attribute matches.
How could I accomplish that more efficiently?
[EDIT]
In this very minimalist scenario, the Child Combinator Selector (>) does the trick, however, in the real layout made with Bootstrap Grid, it doesn't. For reference, this is an example of the whole CSS Path:
div#comment_1212130616.comment.gx-0 div.row.gx-3.profile div.col.align-self-center div.row div.col-2.d-flex.flex-row.justify-content-end.tools

Dropdown submenu wont stay open

I am trying to make my dropdown open only on click. Currently, I can click to open the dropdown however when I move my mouse to the submenu or anywhere else the submenu disappears.
I have tried to use e.stopPropagation but no luck.
Is there a CSS or Javascript solution I can use to help.
HTML
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="menu-anchor" href="javascript:;">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
<div class="dropdown-menu" id="myDropDown">
<div class="row">
<div class="col-xs-6 col-md-4">
<label for="activityCode">Activity Code</label>
<input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="awardId">Grant Number</label>
<input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="granteeName">Grantee Name</label>
<input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('#myUlList').on({
"click":function(e){
e.stopPropagation();
}
});
$('#myDropdown').on({
"click": function (e) {
e.stopPropagation();
}
});
Use <a class="dropdown-toggle" data-toggle="dropdown" href="#"> to open/close a dropdown menu in Bootstrap. JQuery code for the dropdown is not needed. Ofcourse the jquery.min.js and bootstrap.min.js are required.
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
</a>
<div id="myDropDown" class="dropdown-menu">
...
</div>
</li>
</ul>
</div>
I don't recognize your jquery as valid syntax. Try this to trigger a function on click.
$('#myUlList').on("click", function(e) {
e.stopPropagation();
});
$('#myDropdown').on("click", function(e) {
e.stopPropagation();
});

How to create Multi filter Gallery

The product Red Small has the property Size small BUT NOT Medium.
The product Red Medium has the property Medium BUT NOT small.
If the checkbox is selected for both properties, the plugin checks if there are products that have the property small OR Medium.
I need that only the product will show which have both selected properties. So small AND Medium.
How can I do it. can any one help me pls.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="multifilter-gallery-wrap">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="multifilter-gallery-nav nav">
<li class="nav-item dropdown">
Color
<ul class="dropdown-menu not-close-dropdown" data-display="static">
<li class="multifilter-gallery-button" data-filter="red">
<input type="checkbox" value="on">
Red
</li>
</ul>
</li>
<li class="nav-item dropdown">
Size
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button" data-filter="small">
<input type="checkbox">
Small
</li>
<li class="multifilter-gallery-button" data-filter="medium">
<input type="checkbox">
Medium
</li>
</ul>
</li>
<li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
</ul>
</nav>
<div class="row mt-5" >
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small ">
<div class="bg-success m-2" style="height: 200px">
<h2 class="text-white">Red Small</h2>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-4 multifilter-gallery-box red medium ">
<div class="bg-success m-2" style="height: 200px">
<h2 class="text-white">Red medium</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
// venue filter script
$(".multifilter-gallery-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$(this).addClass("active");
$(".multifilter-gallery-button").not(this).removeClass('active').find('input[type="checkbox"]').attr('checked',false);
$('.multifilter-gallery-box').show('1000');
}
else
{
$('.multifilter-gallery-button.active[data-filter="all"]').removeClass('active');
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).find('input[type="checkbox"]').attr('checked',false);
}else{
$(this).addClass("active");
$(this).find('input[type="checkbox"]').attr('checked',true);
}
if($('.multifilter-gallery-button.active').length){
var classes = '';
$('.multifilter-gallery-button.active').each(function(index, el) {
if(index == 0){
classes += '.'+$(this).attr('data-filter');
}else{
classes += ',.'+$(this).attr('data-filter');
}
});
$(".multifilter-gallery-box").not(classes).hide('3000');
$('.multifilter-gallery-box').filter(classes).show('3000');
}else{
$('.multifilter-gallery-button[data-filter="all"]').click();
}
}
});
$('ul.not-close-dropdown').on('click', function (event) {
event.stopPropagation();
});
///////////
})
})(jQuery);
</script>
if($('.multifilter-gallery-button.active').length){
var classes = '';
$('.multifilter-gallery-button.active').each(function(index, el) {
classes += '.'+$(this).attr('data-filter');
});
Basically all you need is to remove the "," from the selector. If you have the classes one after another with no spaces, only the elements with all those classes will fit the selection. So where you build your classes variable, you remove the ","

Change display and icon when click on <a> element

I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>

Jquery event.preventDefault() not working

I want my menu to show and hide list items on click by default they are hide. The problem is my menu is generated in admin section so it auto assigns url of website to it if i set URL field of particular link to null in menu options. so when i click it reloads home page.
What i want is that when i click any parent li it should stop generating default event so used prevent default. but in my case it is not working and it reloads the page after showing list items of there parent.
Here is a fiddle
Fiddle
Html
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Burlington Mall, MA</span>
</li>
<li class=" "><span class="menu-title">Burlington Mall, MA - Cart</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Brunswick Square Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Garden State Plaza, NJ</span>
</li>
<li class=" "><span class="menu-title">Menlo Park Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Ocean County Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Rockaway Townsquare, NJ</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New York Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Galleria at White Plains, NY</span>
</li>
<li class=" "><span class="menu-title">Manhattan, NY-Toys 'R' Us </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">CrabTree Valley, NC</span>
</li>
<li class=" "><span class="menu-title">Fayetteville, NC</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
JS:
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
event.preventDefault();
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
}
});
Css
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li
{
padding:10px;
position: relative;
margin:auto;
}
Here is a working example: http://jsfiddle.net/hk1w89zw/
Not sure what you were trying to acheive with the id prop. In general it's better to set the onClick event on a link (<a>-tag) instead of the li. and use following jQuery code:
$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).closest('.parent').find('.dropdown-mega.level2').show();
});
maybe you want something like this
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
window.location.href="location_of_the_filehere";
}
event.preventDefault();
});
Catch the event when its trigger out
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
event.preventDefault();
}
I have to admit that I got your code wrong.
Here is a https://jsbin.com/gigowopijo/3/edit?html,js,console,output (JSBin).
First you don't have a list with the id "#li_menu169". Add it to the ul element
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner">
<ul id="li_menu169">
Later on you're showing and hiding the same elements which is a bit confusing. Therefore I would recommend hiding all inner elements first and than showing the inner elements of "this" stuff.
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).attr('id');
if (id === 'yes' && typeof id !== undefined) {
console.log("I'm there");
//i want to prevent
} else {
console.log("i'm here");
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).find('.dropdown-mega.level2').show();
//redirect
}
});
Within the JSbin it is working as you expect.

Categories