Don't slideToggle all

Don't slideToggle all - javascript

I have a vertical sliding menu, that looks like this:
<ul class="menu">
<li>link</li>
<li>link</li>
<li class="more">link with submenu</li>
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
<li class="more">link with submenu</li>
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
<li>link</li>
<li>link</li>
</ul>
the jQuery is like this:
jQuery(document).ready(function($) {
$(".more").click(function() {
$(this).parent().children(".submenu").slideToggle(500); });
});
My problem is, when I click on a ".more", every ".submenu" is being slideToggle (Both opens)
How can I do, so it is only the correct submenu that is being slidetoggled?
Thank you.

Remove the call to .parent(). Also, your .submenu should be nested within the <li> to which it belongs, leaving you with the following jQuery:
$("li.more").on("click", function() {
$("ul.submenu", this).slideToggle(500);
});
And this markup:
<ul class="menu">
<li>link</li>
<li>link</li>
<li class="more">
link with submenu
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
</li>
<li class="more">
link with submenu
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
</li>
<li>link</li>
<li>link</li>
</ul>

this one?
$(this).next().eq(0).slideToggle(500); });

Related

Make parent link unclickable in submenu toggle

I am trying to make a sub-menu toggle on mobile but it keeps on redirecting to the parent menu link and adding event.preventDefault(); making entire sub-menu links unclickable. Any idea how to make only first .has-childern a link unclickable?
Markup
<div class="menu-container">
<ul class="nav-menu">
<li class="menu item"> Home </li>
<li class="menu-item has-childern"> About
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu-item has-childern"> Services
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu item"> Contact </li>
</ul>
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.menu-container .submenu').hide();
jQuery('.menu-container .has-childern a').click(function() {
event.preventDefault();
jQuery(this).parent().children('.submenu').toggle();
});
});
JsFiddle https://jsfiddle.net/p5fLsvcq/

You code affect all nested children instead just direct child
use '>' for select just a direct first level child in selector:
jQuery('.menu-container .has-childern > a').click(/*...*/)

Find ul with a specific li item in a collection of ul and than add class to it

I have a collection of unordered lists. I would like to iterate through this list and than find an specific li item and than add a class to the ul containing that li.
I hope I was clear enough for you guys. Let me show you my code for better understanding.
This is a fiddle I created to help you understand my problem.
https://jsfiddle.net/wdwn9swu/
This is what I tried to target the ul I need but it didn't work.
if ($('ul.sub-tab').find('ul.sub-tab > li.super-active')) {
$('ul.sub-tab').find('li.super-active').addClass('super-active');
}
I would like that on of the lists that corresponds with the id, to always be open.
Any idea guys ?? Thanks!!

I think the easiest and simplest way is:
$("li.super-active").parent().addClass("super-active");
According the fact you are using valid html <li> element parent must be <ul> element in that case (can also be <ol>).
$('.main-tab>li a').click(function() {
$(this).siblings('.sub-tab').slideToggle(200);
$(this).parent().siblings('li').children('.sub-tab').slideUp(200);
});
$('.main-tab li').each(function() {
id = '10';
$links = $(".main-tab li[data-id =" + id + "]");
$links.addClass("super-active");
//console.log("1234");
});
$("li.super-active").parent().addClass("super-active");
console.log($(".super-active"));
.main-tab ul {
padding-left: 10px;
}
.sub-tab {
display: none;
}
.super-active img {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab">
<li data-id="7">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

Use jQuery's :has selector:
Selects elements which contain at least one element that matches the
specified selector.
Find ul.sub-tab that has a list item with .super-active class, and add the class .super-active to the ul as well:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
Example:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
.sub-tab.super-active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab"> <!-- this will be removed -->
<li data-id="7" class="super-active">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

DOM traversal from a span element inside an anchor to list

I can't figure how to travers the DOM, starting from <span class = "open-menu-link">, I want to reach <ul class="sub-menu"> .
The script
<script> $('.open-menu-link').click(function(e){
alert(e.currentTarget);
});
</script>
return a Object HTMLSpanElement, but if I code e.currentTarget.parentNode; it returns http://localhost/mysite/home.php. Doing e.currentTarget.children; I get Object HTMLCollection, but if I try e.currentTarget.children[1] I get undefined... so how can I reach <ul class="sub-menu">?
The snippet is the follow:
<ul class="menu">
<li>Work</li>
<li class="menu-item-has-children">Haschildren <span class = "open-menu-link">+</span>
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>

$(function() {
$('.open-menu-link').click(function(e){
console.log(e.target.parentNode.nextElementSibling);
console.log(e.target.parentNode.parentNode.children[1]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Work</li>
<li class="menu-item-has-children">
Haschildren <span class="open-menu-link">+</span>
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
There are couple of options:
$('.open-menu-link').click(function(e){
console.log(e.target.parentNode.nextElementSibling);
console.log(e.target.parentNode.parentNode.children[1]);
});

The <span class = "open-menu-link"> in your code has only one child i.e text node + this is the reason why e.currentTarget.children[1] is giving you undefined.
Coming to the dom traversal, you should start with node <li class="menu-item-has-children"> . Well that is what I can infer from your question.

You need to use preventDefault() because you'r class is a link. By clicking, it'll redirect you to the link.
$('.open-menu-link').click(function(e) {
console.log($(this).parent().next())
e.preventDefault()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Work
</li>
<li class="menu-item-has-children">
Haschildren <span class = "open-menu-link">+</span>
<ul class="sub-menu">
<li>Child 1
</li>
<li>Child 2
</li>
<li>Child 3
</li>
</ul>
</li>
<li>Careers
</li>
<li>Contact
</li>
</ul>

Expand submenu list OL if any of the its list li has active class

I have tree structure based menu and by default sub list as closed, I want to show only that block of list which li anchor a has active class.
I tried few thing but i doing something wrong in targeting the right element.
Let us say i want to keep About section open as it has sub menu's and one of its elemnts has active class
<li><a href="#" class='active'>Mission</a></li>
<h1>Click on Contact</h1>
<div class="page-left-bar">
<ol id='expList'>
<li>Home</li>
<li>News</li>
<li>Contact
<ol>
<li>Sub menu</li>
<li>Sub menu long name</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
<li>About
<ol>
<li><a href="#" class='active'>Mission</a></li>
<li>Vision</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
</ol>
</div>
Fiddle Link https://jsfiddle.net/k2jqqbbk/1/

You can do that by placing the code in document.ready... kindly check the updated jsfiddle...
HTML
<h1>Click on Contact</h1>
<div class="page-left-bar">
<ol id='expList'>
<li>Home</li>
<li>News</li>
<li>Contact
<ol>
<li>Sub menu</li>
<li>Sub menu long name</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
<li>About
<ol>
<li><a href="#" class='active'>Mission</a></li>
<li>Vision</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
</ol>
</div>
JQUERY
$(document).ready(function(){
$("#expList > li").click(function () {
$(this).find("ol").slideToggle();
});
$('#expList > li').children().has('.active').css('display', 'block');
});

try this in jQuery:
$('.active').closest('ol').css('display', 'block');
https://jsfiddle.net/k2jqqbbk/3/

Bootstrap 3 removing active class when hovering over another menu item

I have a side dropdown menu that has three links with submenu items. When I am on one of those sub pages, i add a 'hover' class to the parent ul making it stay open. The problem is, when I hover over another menu link, that submenu still stays open, ultimately blocking the other submenu. How can I remove the hover class to the current link when i hover over another menu item and add it again if i hover out of it?
This is the code I tried to no avail
$(function(){
$(".dropdown-submenu.hover").toggleClass("active",true);
});
$(function(){
$(".dropdown-submenu").on("hover",function(e) {
if($(e.currentTarget).hasClass("active"))
$(e.currentTarget).toggleClass("active",false);
else
$(e.currentTarget).toggleClass("active",true);
e.preventDefault();
return false;
});
$(".dropdown-submenu").on("hide.bs.dropdown", doNothing);
$(".dropdown-submenu").on("show.bs.dropdown", doNothing);
function doNothing() {
e.preventDefault();
return false;
}
});
This is the html
<div class="hidden-xs dropdown col-sm-2 " id="sidebar" role="navigation">
<button id="mainnav" class="btn-block mainmenu mainnav dropdown-toggle" data-toggle="dropdown" data-autohide="false">Menu</button>
<ul id="mainsubnav" class="nav dropdown-menu mainsubnav" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">Has Submenu 1
<ul class="dropdown-menu">
<li>Sublink 1</li>
<li>Sublink 1</li>
<li>Sublink 1</li>
</ul>
</li>
<li class="dropdown-submenu">Has Submenu 2
<ul class="dropdown-menu">
<li><a class="active" href="link1.php">Sublink 2</a></li>
<li>Sublink 2</li>
<li>Sublink 2</li>
</ul>
</li>
<li class="dropdown-submenu">Has Submenu 3
<ul class="dropdown-menu">
<li>Sublink 3</li>
<li>Sublink 3</li>
<li>Sublink 3</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/#sidebar-->
</div>
and this is the code that adds the hover class
$('ul.dropdown-menu > li > a.active:first').closest('li.dropdown-submenu').addClass('hover');
$('ul.dropdown-menu > li > a.active:first').closest('li.dropdown- submenu').children('a').addClass('active');
here is the example
http://www.bootply.com/hXsG8vzeDj

Develop Reference

JavaScript is the programming language of the Web.

Don't slideToggle all - javascript

this one? $(this).next().eq(0).slideToggle(500); });

Related

Make parent link unclickable in submenu toggle

Find ul with a specific li item in a collection of ul and than add class to it

DOM traversal from a span element inside an anchor to list

Expand submenu list OL if any of the its list li has active class

Bootstrap 3 removing active class when hovering over another menu item

Categories

Resources