I have a jQuery function which is suppose to slide down and up the sub menu under some <li> elements.
<li class="subtop">Sample 1
<ul class="sub-menu">
<li>Sample 1 - 1</li>
<li>Sample 1 - 2</li>
</ul>
</li>
.....
<li class="subtop">Sample 6
<ul class="sub-menu">
<li>Sample 6 - 1</li>
<li>Sample 6 - 2</li>
</ul>
</li>
and the jquery is like:
$(".subtop").click(function(ev){
ev.stopPropagation();
$(this).each(function(){
$(".sub-menu", this).slideToggle();
});
});
the code is sliding the clicked element's sun menue up and down but I am not able to close existing open sub-menu when I click on another subtop can you please let me know how to do this?
Thanks
Try this:
$(".subtop").click(function(ev){
ev.stopPropagation();
$(".sub-menu").slideUp();
$(this).each(function(){
$(".sub-menu", this).slideToggle();
});
});
Related
I have a "dot" navigation on a site that has one link with a submenu. Originally, I had a simple JQ function that would slideToggle() the submenu on hover but that was causing some 'bouncing' issues. So, I reverted it back to click() function.
$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle('800');
});
In doing so, I need to add the preventDefault() so the submenu would open up on click, but disable the link.
Turns out, I need to keep the link on that active to navigate to that top-level page, but can't seem to figure out the best way to go about allowing the submenu to open (on click or hover; without bouncing) and keep the menu link active.
HTML for Menu
<div class="menu-primary-container">
<ul id="troy-dot-nav" class="menu reverse-dots">
<li class="...">About</li>
<li class="... menu-item-81">
Integrated Services
<ul class="sub-menu" style="display: none;">
<li class="...">EPC & Project Services</li>
<li class="...">Pipeline Construction</li>
<li class="...">Facility Construction</li>
<li class="...">Integrity Management</li>
</ul>
</li>
<li class="...">Safety & Quality</li>
<li class="...">Careers</li>
<li class="...">Contact Us</li>
</ul>
</div>
The CSS creates the dots on the li:after. Removed extra HTML for cleaner look here.
can't you just use css to add/remove an active class and also close all / open related submenu ?
Like so :
$(document).ready(function() {
$('.link').click(function() {
// Remove the "active" class from all links
$('.link').removeClass('active');
// Add the "active" class to the clicked link
$(this).addClass('active');
// Find the corresponding sublist
var sublistId = $(this).data('sublist');
var sublist = $('#' + sublistId);
// Close all sublists
$('.sublist').hide();
// Open the corresponding sublist
sublist.show();
});
});
with that kind of html :
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<ul id="sublist-1" class="sublist">
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<ul id="sublist-2" class="sublist">
<li>Sublist item 3</li>
<li>Sublist item 4</li>
</ul>
<ul id="sublist-3" class="sublist">
<li>Sublist item 5</li>
<li>Sublist item 6</li>
</ul>
I have the above code which ideally will slide toggle the ulContainer but it doesn't work as expected. I would like it so when I click on the selector above, it only toggles one of the ul#dropdown-download-links li > a one click at a time. Currently, obviously it toggles them all on click.
$(document).ready(function() {
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I hope that makes sense, I feel like it's a super common probelm it's just hard to explain.
The event is bound on the 'a' element, to get and toggle the child items, you first need to go up one level with the 'parent()' method which returns the 'li' element. After that use the find method to get the child list items.
$(document).ready(function(){
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).parent().find("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
$(document).ready(function(){
$("ul#dropdown-download-links li:first-child >a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I create this nested list to show and hide items but I want ask how can I show one list and hide other for example if user click on second subject will hide all open items
HTML
<ul>
<li class="subject">List item 1 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 2 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 3 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>
javascript
$(function(){
// $("ul li").children().slideDown("slow");
$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
});
})
CSS
#item
{
display: none;
}
$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
$(this).siblings().children('ul').slideUp();
});
DEMO
or
$(".subject").click(function () {
$(this).find("#item").slideToggle("slow")
.end().siblings().children('ul').slideUp();
});
DEMO
I corrected your markup. Your IDs should always be unique; otherwise use classes.
$(function(){
$(".subject").click(function(){
$('ul.item').not( $(this).find('ul.item') ).slideUp("slow");
$(this).find('ul.item').slideDown('slow');
});
});
WORKING JSFIDDLE DEMO
I have a one-page website with a menu like this:
<ul id="menu-menu" class="nav">
<li id="1">Item 1</li>
<li>Item 2
<ul>
<li id="1" class="sub">Item 2-1</li>
<li id="1" class="sub">Item 2-2</li>
<li id="1" class="sub">Item 2-3</li>
</ul>
</li>
<li id="1">Item 3</li>
<li id="1">Item 4</li>
</ul>
The menu is high-lighted by JavaScript:
<script type="text/javascript">
/* <![CDATA[ */
var J = jQuery.noConflict();
J(document).ready(function(){
J('.nav li:first').addClass('current');
J('ul.nav').each(function() {
J(this).find('li#1').each(function(i) {
J(this).click(function(){
J(this).addClass('current');
J(this).siblings().removeClass('current');
});
});
});
});
/* ]]> */
</script>
The problem is that when I click on Item 3 and than on Item 2-2, Item 3 stays high-lighted., and when I than click on Item 1, Item 2-2 stays high-lighted.
Any ideas how to fix this?
var J = jQuery.noConflict();
J(function(){
J('ul.nav li:first').addClass('current');
J('ul.nav li').click(function (e) {
J('ul.nav li.current').removeClass('current');
J(this).addClass('current');
e.stopPropagation(); // prevent the event click from bubbling up
});
});
Untested, but try to replace
J(this).addClass('current');
J(this).siblings().removeClass('current');
with
J('ul.nav .current').removeClass('current');
J(this).addClass('current');
.
The problem is that the sibling selector only finds just that, the siblings, and not the other elements.
HTML:
<div class="filter">
category 1
category 2
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
What I want is for example clicking on 'category 1' link should hide all other category items from the list.
I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.
Thanks for your help!
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});
Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();
The first to hide all other menu items, the latter to show the selected ones :)
You can simply put it in the onclick of the <a> tag.