The left is what my code does, the right is what I want it to do. When clicking on a menu item it collapses fine but I want to be able to un-collapse them after and be able to collapse all of them if I wish.
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});
html
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"></li>
<li>
<i class="material-icons">home</i>
</li>
<li>
Overall
<ul id="overall" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Dashboard
<ul id="dashboard" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Service
<ul id="service" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
</ul>
If you need this approach just remove that jQuery code.
I mean this one:
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});
Related
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(/*...*/)
I have created responsive navbar with bootstrap but the problem is when i click on a single dropdown link all dropdown links open at the same time.
HTML
<div id="inner-navbar">
<nav>
<ul>
<li>Home</li>
<li>Template</li>
<li class="inner-link" data-target="1">Schedule <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li>People</li>
<li class="inner-link">Location <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Admin <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Reports <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
</ul>
</nav>
</div>
i think the issue is with the jquery class i have called it with every single dropdown.
jquery
$(document).ready(function(){
$(".inner-link").click(function(){
$(".inner-bar").toggle();
});
});
it is working fine i have almost completed it but it stuck at where i think is an issue for user.if user to select a dropdown, all dropdown will open at the same time.
I know there are lot's of different navbar out there to use but i wanted to learn by my own because im new to jquery and in learning phase of it.
Try
$(this) will point to the current element.
$(this).find(".inner-bar") find the element with class .inner-bar inside the current element and perform the toggle operation.
$(document).ready(function(){
$(".inner-link").click(function(){
$(this).find(".inner-bar").toggle();
});
});
Docs :- https://api.jquery.com/
Try with this and .find() to refer the current drop dwon
$(this).find(".inner-bar").toggle();
$(document).ready(function(){
$(".inner-link").click(function(){
$(this).find(".inner-bar").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="inner-navbar">
<nav>
<ul>
<li>Home</li>
<li>Template</li>
<li class="inner-link" data-target="1">Schedule <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li>People</li>
<li class="inner-link">Location <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Admin <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Reports <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
</ul>
</nav>
</div>
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>
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>
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); });