I have a drop down menu ul when I am on the page I would like to have the drop down menu stay so I want to show the ul item only if it has a li element with the class ".current-menu-item" in it. I found this code, but it would show all drop downs (.sub-menu) I only want to have the one with the ".current-menu-item" in it to be shown:
if ($(".sub-menu").find(".current-menu-item").length > 0){
$(".sub-menu").css('display', 'block');
}
How can I achieve this?
Simply use :has selector:
$(".sub-menu:has(.current-menu-item)").show();
Related
I have a simple Mega Menu. I am trying to display the sub menu of the parent menu item clicked. But for some reason when I click the parent item all the sub menu's are displaying instead of the clicked parent item sub menu. What I am doing wrong.
Here is my JSFiddle link
https://jsfiddle.net/jokcLjkb/4/
here is my js code.
$(document).ready(function() {
$("a.drop").on('click', function(e) {
e.preventDefault();
$("ul.mainNav li > .drop-full-col").css("display","block");
});
});
Thanks and Appreciate it
Your line:
$("ul.mainNav li > .drop-full-col")
Will select all the submenus because you target the main nav and all the <div class="drop-full-col"> elements. You need to select only the ones relative to the link you click on, and to do that you need to use this to refer to the link being clicked on. So change:
$("ul.mainNav li > .drop-full-col").css("display","block");
to
$(this).closest('li').find(".drop-full-col").css("display", "block");
jsFiddle example
.closest('li') will look for the closest list item when you click the link, and .find(".drop-full-col") will then search down the DOM for the div you want.
Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/
There are probably a few ways to do this but I have a class called sub that I add to hide a 'nested' Div and then use jQuery to toggle the Glyphicon along with display the 'nested' Div. Some asks:
$('.menu-toggle').click(function() {
$(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
//How to do something like this to traverse the click and structure $(this).parent.find('.sub:first-child').toggle();
$('.sub').toggle();
$('.subsecond').toggle();
});
The nested team structure intended is this:
Adam
Lily
2.1 Sen
2.1.1 Tank
2.2 Another Sen
Justin
What I'm trying to do do is have this traverse through the DOM based on where the click happens to display the sub section under there. I have the content coming from a source system so can't hard code class directly.
Let me know if you have any question.
You can find the next div by using .closest('.row') to get the parent .row and .next('.row') to get the next .row of the parent .row if it has class or not using hasClass() so you can use
$('.menu-toggle').click(function(e) {
e.preventDefault(); // prevent <a> to redirect to the top of the page
$('.row:not(.sub):not(.subsecond)').not($('.sub').prev('.row')).not($('.subsecond').prev('.row')).not($(this).closest('.row')).find('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
$(this).find('span').toggleClass('glyphicon-menu-down glyphicon-menu-up');
var Nextrow = $(this).closest('.row').next('.row'); // get the next row
if(Nextrow.hasClass('sub')){ // if next row has class sub
$('.sub').not(Nextrow).hide(); // hide all sub but not this one
Nextrow.slideToggle(function(){
if($(this).is(':hidden')){ // check if the .sub is hidden
$('.subsecond').hide(); // hide subsecond
$('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up'); // toggle arrows to the down
}
}); // toggle this sub row
return false;
}
if(Nextrow.hasClass('subsecond')){ // if next row has class subsecond
$('.subsecond').not(Nextrow).hide(); // hide all subsecond but not this one
Nextrow.slideToggle(); // toggle this subsecond row
return false;
}
});
See Example
I am trying to show li items with a certain class in a second bootstrap dropdown based on the li item selected in the first dropdown.
$(document).ready(function() {
$('#mapContent').hide();
$('#mapCat').click(function(){
$("#mapContent").show();
$("#mapContent ul li .show1").hide();
});
})
The problem is the second ul is being show on click but all <li> items are being shown not just <li> with class of 'show1' while on click only <li class="show1">University X</li> should hide in the second dropdown.
Here is my fiddle
You have a space li .show1 which tells jquery to search for children of li but you want the li, remove it to get the li's
$("#mapContent ul li.show1").hide();
whenever the user the tabbed menu, from then, the selected tabbed menu should be selected[in background color] until the user select next any one of the tabbed menu. each tab menu has each page on its body content.
in code, the selected tab menu should have attribute class="selected" inside the html until user select next equivalent menu, i need this in javascript or in jquery.
Any help? please
my html code for this
<ul class="mainnav" id="mainnav1">
<li><span>Home</span></li>
<li><span>Test orders</span></li>
<li><span>Access arrangements</span></li>
<li><span>Pupil registration</span></li>
<li><span>Teacher assessment</span></li>
<li><span>Pupil results</span></li>
<li><span>Phonics screening check</span></li></ul>
Hope this can help.
$("#mainnav1 li a").on("click", function(){
$("#mainnav1 li a").removeClass("active");
$(this).addClass("active");
return false;
});
jsfiddle
I have a select list that when the user selects an item it builds an li element on the fly, when the users clicks the li element, the li is removed. Below is the code that I currently have,
The below adds the li on select of an option
$('#sectors').change(function(e){
$('#selected_sectors').empty();
$(this).find(':selected').each(function(i,e
{$('#selected_sectors').append($('<li>').text($(e).val()));
});
});
The below removes the generated li
$('ul#selected_sectors li').live('click', function(){
$(this).fadeOut('slow').remove();
$('#selected_sectors').val($(this).text()).attr('selected', false);
});
What I am wanting is when an li is removed the select option with the same value as the li's text is also unselected?
You can select options based upon value like the following:
$("#sectors").val("0")
Or you can select based upon first option element
$("#sectors option").first().attr("selected", "selected");
Example on jsfiddle