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();
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.
<ul>
<li class="trigger">Menu One<span class="show_hide">Show Hide One</span></li>
<li class="trigger">Menu Two<span class="show_hide">Show Hide Two</span></li>
<li class="trigger">Menu Three<span class="show_hide">Show Hide Three</span></li>
When I click on the Menu One ,Show Hide One text will be appear and when I will click the second li then first one will be display none. But always the text Menu One,Menu Two,Menu Three will be visible. I have set display none to class="show_hide". Thanks
If I've understood your question correctly, this should do the trick.
$('.trigger').click(function(){
$('.trigger span').addClass('show_hide');
$(this).children('span').removeClass('show_hide');
})
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();
I've this markup
<ul id="body">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
When an item is clicked, is there a way in jQuery to identify in the DOM, the previous and the next li so that I can use jQuery functions on those elements??
Say, if the person clicks on item 2, i want to hide item 1 and item 3.. similarly, if the user clicks on item 3, hide item 2 and item 4 (previous and next item in the list).
Get a pointer to the previous and next elements.
Select all siblings that are not the previous and next elements.
Hide the previous and next siblings.
Show the other elements.
This allows the code to work more than once :)
$('#body > li').click(function() {
var prev = $(this).prev(),
next = $(this).next(),
siblings = $(this).siblings().not(prev).not(next);
prev.add(next).hide();
siblings.show();
});
jsFiddle.
If you don't care if the other elements are hidden forever once clicked, simply remove the all references to the siblings variable and its relevant code.
$('#body .item').click(function() {
$(this).prev().add($(this).next()).hide();
});
Edit:
$('#body .item').click(function() {
$(this).siblings().show().end().prev().add($(this).next()).hide();
});
From the comment, This will show all before hiding the prev and next li elements.
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