I have a drop down menu within a header using Bootstrap data-toggle="dropdown". When you click the drop down button, a list should appear. When you click the header, the content should slide up and down.
The problem is, when I click the drop down button it also triggers the header. The usual answer here is e.stopPropagation but when I use that, it also stops the drop down menu from appearing.
How can I prevent the dropdown button from triggering the header?
HTML
<div id="top">
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
Show List
</button>
<ul class="dropdown-menu">
<li>Some Item</li>
<li>Some Item</li>
<li>Some Item</li>
</ul>
</div>
</div>
<div id="content" class="collapse">
This is the actual content
</div>
JS
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function() {
$('#content').collapse('toggle')
})
$('button').click(function(e) {
//e.stopPropagation();
})
I have prepared a fiddle that illustrates this issue.
You should instead filtering regarding event.target of click on #top element:
$('#top').click(function(e) {
if($(e.target).closest('button[data-toggle], .dropdown-menu').length) return;
$('#content').collapse('toggle')
})
-jsFiddle-
You can do this as well.
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function(e) {
if(e.target.type != "button"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})
Another way to do it, use e.target to determine if the clicked element is #top:
$('#top').click(function(e) {
if(e.target.id=="top"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})
Related
I have a dropdown menu that has parent categories that display their children links automatically on Desktop and hide them on mobile until they are clicked. If the window is sized back up the children show again.
This almost works but after resizing the window, if I click the parent category on Desktop it will slideToggle the children elements. It will also run multiple slideToggle events after resizing rather than just one.
I am aware it is likely due to having two instances of slideToggle() but I was having issues when removing one or the other instances. Sometimes they would never open on mobile so I found putting both instances solved this.
I am looking for a less bloated and fully functioning solution. I appreciate all help and I hope to gain knowledge from the answers.
CodePen
//Start Ignore
$('li.dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
$('body').on('click', function (e) {
if (!$('li.dropdown').is(e.target)
&& $('li.dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('li.dropdown').removeClass('open');
}
});
//End Ignore
/**** CODE I NEED HELP WITH BELOW ****/
$(window).resize(function(){
if ($(window).width()<768){
$('.top-nav-link').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.dropdown-nested-links').slideToggle();
console.log('I worked.');
});
}else{
$('.dropdown-nested-links').css('display', 'inline-block');
}
});
if ($(window).width()<768){
$('.top-nav-link').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.dropdown-nested-links').slideToggle();
});
}else{
$('.dropdown-nested-links').css('display', 'inline-block');
}
$(window).resize(function(){
if ($(window).width()>768){
//Expands the links when resized back to Desktop
$('.dropdown-nested-links').css('display', 'inline-block');
}else{
//Hides the category dropdown when resized back down to mobile
$('.dropdown-nested-links').css('display','none')
}
});
.dropdown-nested-links{
padding:0;
display:none;
}
#media only screen and (min-width:768px){
.dropdown-nested-links{
padding:0;
display:inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav learn-nav">
<li class="dropdown">Click Me <span class="glyphicon glyphicon-menu-down"></span>
<ul class="dropdown-menu">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 dropdown-section">
<li>Parent 1</li>
<ul class="dropdown-nested-links">
<li><span></span>Child</li>
<li><span></span>Child</li>
<li><span></span>Child</li>
</ul>
</div>
<div class="col-sm-6 dropdown-section inverse-section">
<li><a class="top-nav-link" href="#">Parent 2</a></li>
<ul class="dropdown-nested-links">
<li><span></span>Child</li>
<li><span></span>Child</li>
</ul>
</div>
</ul>
</li>
</ul>
</nav>
You should either remove the click event or make the condition inside the click event :
$('.top-nav-link').on('click', function(event){
if ($(window).width()<768){
event.preventDefault();
$(this).parent().parent().find('.dropdown-nested-links').slideToggle();
console.log('I worked.');
}
});
$(window).resize(function(){
if ($(window).width()>=768){
$('.dropdown-nested-links').css('display', 'inline-block');
}
});
I have a problem with a drop down menu that must remain open to the click.
After the menu is open, you can click the link inside and the menu item just clicked.
How can I do to remedy the preventDefault ?
Menu HTML:
<nav class="main-menu">
<ul id="" class="menu">
<li>
Menu One
<div class="sub-menu">
<ul>
<li>test test test</li>
... More links ...
</ul>
</div>
</li>
... More items ...
</ul>
</nav>
This is a portion of code
$('.main-menu li a').click(function(event) {
event.preventDefault();
$('.main-menu').find('.sub-menu').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
An example is visible here JSFIDDLE
Just remove
$('.main-menu').find('.sub-menu').removeClass('open');
Here is a fiddle you can check out
Get rid of event.preventDefault();
Instead do like this
<a href="#" onclick="return false">
Then give each main menu a class name. And call the click event on that class.
https://jsfiddle.net/btevfik/9m9rufqx/3/
You can replace your selector with a more targeted (.menu > li > a) :
$('.menu > li > a').click(function(event) {
event.preventDefault();
$('.sub-menu.open').removeClass('open');
$(this).parent().find('.sub-menu').addClass('open');
});
JSFiddle
I'm trying to show/hide an element on mouse click but it has to be the element that is clicked not just the class because multiple classes will exist on the page.
Heres what I've got;
<i class="fa fa-bars dropMenu">here</i>
<nav class="drop-down">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
<li>Buy Now<span>5</span></li>
</ul>
</nav>
the javascript
$(".dropMenu").click(function(){
if ($(".drop-down",this).is(':visible')) {
$(".drop-down",this).hide();
} else if ($(".drop-down",this).is(':hidden')) {
$(".drop-down",this).show();
}
});
JSFiddle - http://jsfiddle.net/75yek8do/
You've not included jQuery and you're using <i> as a context but it is inline element and cannot have any elements inside it. So remove this, as the context.
$(".dropMenu").click(function() {
if ($(".drop-down").is(':visible')) {
$(".drop-down").hide();
} else if ($(".drop-down").is(':hidden')) {
$(".drop-down").show();
}
});
DEMO
But you can simply toggle it
$(".dropMenu").click(function(){
$('.drop-down').toggle();
});
If you must stick to your current markup and have many dropdowns :
$(".dropMenu").on('click', function(){
$(this).next('.drop-down').toggle();
});
Fiddle
Here you are http://jsfiddle.net/75yek8do/2/
You can have as many as you like items to click on (.dropMenu). It will search for the next occurrence of the .drop-down element and it will toggle its visibility.
$(".dropMenu").on('click', function () {
$(this).next(".drop-down").toggle();
});
I'm trying to create a <select> replacement that mimics all of <select>s functionality, but can be custom styled and use icons.
My problem is i can't seem to get focusout to hide the options. As of now focusout trigger the same thing when tabbing/arrowing the list items as when you tab/click outside.
Generated HTML
(idd = icon-drop-down)
<div class="idd-wrapper">
<button>Select text</button>
<ul id="idd-ul">
<li>
<a href="#">
<span class="icon-apple"></span>
<span class="idd-text">Apple</span>
</a>
</li>
[...]
</ul>
</div>
jQuery
$('#idd-ul a').each(function(e) {
$(this).on('focusout', function(e) {
//Trying different if statements...
if($('#idd-ul a').is(':focus')){
//do nothing
} else {
$('#idd-ul').hide();
}
});
});
CodePen here Accessible dropdown with icons
I have set up a jquery hover show and hide function click here for site however it doesn't work the way i want it to. When you hover over the link "store" it reveals the hidden div, which is a submenu, once the mouse cursor has been moved from the link "store" the hidden div slides.
I want the submenu to stay activate unless one the links in the submenu have been click on or the mouse cursor is have been moved outside of the submenu area.
below is a snippet of my code...
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function(){
$(".slidingDiv").slideToggle();
});
$('.slidingDiv').mouseout(function(){
$(".slidingDiv").slideUp();
});
});
<div id="menu_store" class="slidingDiv transparent">
<div class="menu">
<h3>clothing</h3>
<ul class="navigation">
<li>sweats / knitwear</li>
<li>shirts</li>
<li>denim</li>
<li>outwear</li>
<li>footwear</li>
</ul>
</div>
<div class="menu">
<h3>lifestyle</h3>
<ul class="navigation">
<li>books</li>
<li>art</li>
<li>objects</li>
</ul>
<div id="menu">
<ul class="cl">
<li><a class="show_hide" href="#">store</a></li>
<li>daily</li>
<li>featured</li>
<li>contact</li>
</ul>
Does anyone have a solution for this...?
I figured it out. http://jsfiddle.net/vtFfv/
Relevant documentation: http://api.jquery.com/mouseleave/
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseenter(function () {
$(".slidingDiv").slideDown();
$(".slidingDiv").mouseleave(function () {
$(".slidingDiv").slideUp();
});
$('.slidingDiv a').each(function () {
$(this).click(function () {
$(".slidingDiv").slideUp();
});
});
});
});
When you hide slidingDiv, mouse events aren't registered. So the solution is to attach a mouseleave event to it once you decide to show it (that is, on mouseenter). And then registering clicking on the links is easy.