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(/*...*/)
Related
I have a large number of DIVs on a page. Each being a container for an Unordered List. Above each DIV is a header text which consists of an element with an anchor.
e.g.
<h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I need to have all these DIVs hidden until the header (anchor) is clicked. If the user clicks header it should toggle show/hide DIV
How can I accomplish this in JQUERY in a way that I can have one onClick function for all the DIVS, possibly using an id to differentiate between divs?
<h2> Header 1 </h3>
function toggleDiv(id) {
}
but in JQUERY ?
SOLVED!!!!
<script>
$(function(){
$('.toggle-link').on('click', function() {
var linkId = $(this).attr('data-div-id');
$('#' + linkId).toggle();
});
});
</script>
<h2> Header 1 </h2>
<div id="div1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2> Header 2 </h2>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You can use .toggle() in jQuery
toggle() method toggles between hide() and show() for the selected
elements.
function toggleDiv(id) {
$('#'+id).toggle();
}
where id is the parameter you pass
I have a menu with a sub menu, when the sub menu is visible I want to add a class to parent list element.
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>
Basically, when the "lower-menu" is visible, I want to add another class to the list element "parent-li". Also when the lower-menu is not visible, I want to the remove the class from "parent-li". Is this possible in JQuery?
Thanks
You can do by following jquery script
if($('.lower-menu').is(':visible')){
$(this).parent().addClass("YourClass");
}
You can select the desired element by :visible pseudo class and then assign your class to its parent:
$(".lower-menu:visible").closest('.parent-li').addClass("test");
.test {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>
Can anyone please help me on this problem.
I have a list order like:
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I want this like :
<ul>
<li class="parent">Parent item 1</li>
<div>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
</div>
<li class="parent">Parent item 2</li>
<div>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
</div>
<li class="parent">Parent item 3</li>
<div>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</div>
</ul>
is this possible to make it using jQuery?
Thanks in Advance.
If you are able to accept a semantically correct nested list, you could achieve that by using jQuery to loop through each .parent element and select each item after it until it hits the next .parent item using nextUntil(). Then, you create a new <ul> and append those children to it and then append the new <ul> to the parent <li>.
// Select all of the .parents and loop through them.
$('.parent').each(function() {
// Select all the following siblings starting from this .parent element until you reach the next .parent element.
var $children = $(this).nextUntil('.parent');
// Take the results and append them to a new ul element and then append that ul element to the current .parent li element.
$children.appendTo($('<ul>').appendTo($(this)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
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');
});
Could someone help me with a javascript that add a hyperlink to a list class? i.e. if class="backTo" then add href="index" to that class.
Current HTML
<div class="secondary-nav">
<ul class="secondary-nav">
<li class="backTo">Campaign</li>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
<li>title 4</li>
</ul>
</div>
So the javascript does this:
<div class="secondary-nav">
<ul class="secondary-nav">
<li class="backTo">Campaign</li>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
<li>title 4</li>
</ul>
</div>
Add this at any place below the navigation, or include it in an external script:
<script>
var backListItem = document.querySelector('.backTo');
backListItem.innerHTML = ''+backListItem.innerHTML+'';
</script>