I have a CSS dropdown menu that is functioning how I want it to except for one part, clicking on one of the submenu items does not close the submenu.
Most people probably don't care about this because each link will take them to a new page, but mine just stays on the same page and calls a javascript function.
Using jquery, I am unable to hide the submenus on click like so:
$('.sub li').click(function(){
$('.sub ul').hide();
});
OK, what you need to do is to hide it, but then remove the hard coded styling from the element as this will prevent the hover working:
$('.sub li').click(function(){
$('.sub').hide();
setTimeout(function(){ // breathing space
$('.sub').prop('style', '');
}, 10);
});
Here's a working version fiddle
The class .autoclose is applied to a <ul> not a <li> so correct the assign class on the html and should work
Related
Sorry for the question title, I really didn't know how to summarise it a short description.
Essentially I have got a <ul> which has my navigation links. However in one of the <li> links is my custom dropdown shopping basket to give the user a preview of their items.
Now when I hover over the element , I want it to change the basket from display:none to display:block making it visible. But with my code, as soon as I leave the hovered element to click on an item. The dropdown disappears because I'm no longer hovering over the element I defined in my jQuery hover function.
For example (quick dummy code)
$('.hover-on-me').hover(function(){
$('.hover-open').show();
},function(){
//This right here hides the dropdown
$('.hover-open').hide();
});
Now I'm not the bets at javascript/jQuery. I have tried to say in the function, if the mouse is still on the navigation bar , don't hide it or if the mouse is on the shopping basket then don't hide it. I thought this would let me move from the hover element, past the navigation bar and onto the drop down menu but it doesn't work. as the element then stays open and doesn't close when i leave the area.
Here is a simple jsfiddle demonstrating my problem.
Thanks!
I think there is mistake in your class name only.
jQuery Code :-
$('.hover-on-me').hover(function(){
$(this).parent("li").addClass("active");
}, function(){
$(this).parent("li").removeClass("active");
});
Add this to you CSS Code :-
ul li.active{display:inline-block;}
ul li.active .hover-open, ul li .hover-open:hover{display:block;}
Can you please try these.
the hover syntax will look like this.. $(selector).hover(inFunction,outFunction)
and try to modify your script like this..
$('.hover-on-me').hover(
function(){
$('.hover-open').show();
},
function(){
if(!$('ul').is(":hover") || !$('.hover-open').is(":hover")){
$('.hover-open').hide();
}
}
);
OR
use mouse event function..
$( ".hover-on-me" )
.mouseenter(function() {
$('.hover-open').show();
});
$( ".hover-open" )
.mouseleave(function() {
$('.hover-open').hide();
});
for further details refer here..https://api.jquery.com/hover/#hover2 and https://api.jquery.com/category/events/mouse-events/
I guess this is a noob question. I want Bootstrap "navbar-collapse" to close by clicking away or by clicking one of list items. I found this code somewhere and it works.
$(document).on('click',function() {
$('.collapse').collapse('hide');
});
But this code also makes Bootstrap "panel-collapse" elements close by clicking away and of course I don't want this to happen.
How can I specify that I want this code to work only for "navbar-collapse" elements?
Give your navbar collapse elements a new class and assign it inside:
$('.NewClassName').collapse('hide');
Note that you ADD that class to the navbar collapse elements without removing the old class.
Your code is correct.
The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.
$(document).on('click',function(e){
if($('#navbar-collapse').hasClass('in')){
$('.collapse').collapse('hide');
}
})
Also, make sure you have the
<script src="/js/bootstrap.min.js"></script>
in your file.
Check whether you are clicking outside the navbar. Collapse method can be fired expectedly by using our reference to the navbar
$(document).click(function (event) {
var target = $(event.target);
var $navbar = $(".navbar-collapse");
var opened = $navbar.hasClass("in");
if (opened === true && !target.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});
If you are using the bootstrap navbar class, you can simply do:
$('.navbar .collapse').collapse('hide');
This will hide all collapse elements which are children of the navbar class.
I am working on a project where the most bad thing is that I can't edit HTML code of my project. I can only edit CSS/JavaScript. My project is that I have a list of menu using <ul><li>... having sub-list also in it. The full HTML code is giving below...
<ul class="main_list">
<li class="parent">
Menu-1
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
<li>Menu-2</li>
<li>Menu-3</li>
<li>Menu-4</li>
<li class="parent">
Menu-5
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
</ul>
This is the HTML code that I can not edit. I can only edit or add CSS/JavaScript. Here I want to hide all children menus and will show on click of there parent menu. But when we click on there parent menu then it goes to the external link that is on parent menu. So is there any way or solution for this...???
Update:
Keep in mind that I also want the parent menu link working too. I have an idea to add some text in front to parent menu like show/hide and make some JavaScript to open its children menu and in this case parent menu link will also work if we will click on it directly. Now can we add some text/icon in front of parent menu using JavaScript as I can't edit HTML?
Your click-function:
$('.main_list .parent > a').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href'); // save the href for further use
$(this).siblings('.children').show(); //or whatever show-function you want to use
window.location.href = href; //if you want to user to be redirected
//OR
window.open(href,'_blank'); //for opening a new tab
});
For your second request, you can do somethin like that:
$(document).ready(function{
$('.main_list .parent').prepend('<span class="show">Show</span>');
});
then your selector in the click-handler above would be:
$('.show')
Demo
Cach your parent click event via JavaScript, then use event.preventDefault() to stop redirecting, then u can make some logic to show/hide menu items.
$(document).ready(function(){
$.each('.parent', function(){
$(this).prepend('<div class="clickableBox"></div>');
})
$(document).on('click', '.clickableBox', function(event){
//show/hide logic here
})
})
Based off of my comment above...
Append a drop down arrow next to the menu item for items with children - clicks on the parent item would navigate to it's link but clicks on the arrow would open up the submenu
JSfiddle DEMO
CSS:
ul.children {
display: none;
}
JQUERY:
$(function(){
$('li.parent').each(function(){
$(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
});
$('li.parent img').on("click",function(){
$(this).siblings('ul.children').toggle();
});
});
EDITED JQUERY (with arrow image toggle):
$('li.parent img').on("click",function(){
if($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).attr('src','Arrow-down.png');
} else {
$(this).addClass('open');
$(this).attr('src','Arrow-up.png');
}
$(this).siblings('ul.children').toggle();
});
Updated DEMO
Since I can't see the full HTML, I'm acting like main_list is the only one.
// Get all anchors in menu
var anchors = document.getElementsByClassName('main_list')[0].getElementsByTagName('a');
// Change HREF to do nothing
for(a in anchors){
a.href = "javascript:void(0);
}
// Do other stuff
Make that code run at the end of the page after everything has loaded. Changing the href to javascript:void(0) will make there be no action.
The below works for me :)
jQuery(function( $ ){
$(document).ready(function(){
$('.main_list a').click(function (e) {
if ($(this).parent().children('ul').is(':visible') != true) {
$(this).parent().children('ul').show();
e.preventDefault();
return false;
}
})
});
});
Ok... So I have this drop down menu working as I'd like... however I'm trying to figure out how to revert the function back to it's original state after a menu item is clicked.
So first when you trigger the function it does & works great the following:
It swaps out .menu_hide and .lockscreen for .menu_show and .lockscreen_on.
// show and hide mobile menu
$('#triggerMobileMenu').click(function(e) {
e.preventDefault();
// Toggle all 4 classes off or on
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
But now I'm trying to add another piece that says once a menu item is clicked, close the menu and swap the classes back to their original state from .menu_show and .lockscreen_on, to .menu_hide and .lockscreen_off.
$('#mobileMenu ul li a').on('click',function(){
$('#mobileMenu').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#mobileScreen').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
});
I should also note that on the same page a scroll to id# may be happening vs just simply taking you to the new url/page. Either case will happen though.
I think that you're making this too complicated. Use the same event handler for both a#triggerMobileMenu and ul#mobileMenu li a since you're having them do the same thing (toggle the visibility of the menu and another element).
$('a#triggerMobileMenu, ul#mobileMenu li a').on('click', function(evt){
evt.preventDefault();
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
});
If you need to know which element was clicked in the event handler, evt.target is available:
if( $(evt.target).is($('a#triggerMobileMenu')) ) {
// do stuff
}
See http://jsfiddle.net/Mph6t/3/
I think it is working as intended. I had to fix some id names that may have been switched in the translation to jsfiddle. Here's a working one as far as I can tell. This leaves the somename2 div still showing. I assume that is going to be blank and just for locking the screen right?
I also changed the link to a new tab for testing purposes. FYI.
Relevant changes are:
$('#somename1 ul li a').on('click',function(){
$('#somename1').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#somename2').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
So I made my own right click context menu, and I have expandable options on the right click menu when you hover over them. I want the expanded menu to close if the mouse leaves the right click menu so I used the following code:
$('ul').live('mouseout', function(event) {
// close code here
});
But the problem is the event gets called every time I move the mouse onto any of the <li> elements.
How do???
$('ul')
That means all the ul elements. May be you can give it a class (or an id) and do
$('ul.theClass')
Or
$('#ulId')
You might want to change your the code to not bind 'ul' to mouseout because the 'ul' tag would wrap the 'li' tags else nothing you do would work.
A solution for this is that you change menu option title to a div or something else while retaining the menu options as 'ul' 'li' tags
You should try in li try any one of this
$('ul li.classnameforli').bind('mouseout','mouseleave' function(event) {
// close code here
});
Or
$('ul li.classnameforli').live('mouseout' function(event) {
// close code here
});