My HTML is like this
<div id="cssmenu">
<ul>
<li class="has-sub open ">
<a href="/rigging.aspx " > rig </a>
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
</ul>
on page load if any <li> has class open I want its child <ul> element to be slide down. I have written something like this
$(document).ready(function () {
if ($('#cssmenu li').hasClass('open')) {
$(this).children('ul').slideDown();
}
}
But its not working (slide down not happens) can any one point out what I am missing here?
This selects all ul children of li which have the class .open and applies slideDown.
$('#cssmenu li.open > ul').slideDown();
$('li.has-sub > ul').slideDown();
.has-sub > ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="has-sub open ">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
<li class="has-sub open ">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
<li class="has-sub">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
</ul>
Related
Here are the two scripts I am using
First one adds arrow after .a that has sub-menu, .has children
jQuery(function($) {
$('a + ul').prev('a').append('<span class="sub-menu-open">▼</span>');
});
This second opens sub-menu, but on menu a click.
jQuery(function($) {
$('.sub-menu').hide(); //Hide children by default
$('.menu').children('').click(function(){
event.preventDefault();
$(this).children('.sub-menu').slideToggle('slow');
});
});
this is html code.
<ul id="menu-izb" class="menu">
<li id="menu-item" class="bp-menu ">
Activity
</li>
<li id="menu-item" class="bp-menu">
Log Out
</li>
<li id="menu-item" class="menu-item"><a href="/">Blog
<span class="sub-menu-open">▼</span>
</a>
<ul class="sub-menu" style="">
...
How do I make sub-menu toggles onclick on <span class="sub-menu-open">▼</span>?
I don't know what your JS-Code is doing. But here is a solution for "opening sub menu on click on span":
<ul id="menu-izb" class="menu">
<li id="menu-item" class="bp-menu ">
Activity
</li>
<li id="menu-item" class="bp-menu">
Log Out
</li>
<li id="menu-item" class="menu-item has-children"><a href="">Blog
<span class="sub-menu-open">▼</span></a>
<ul class="sub-menu" style="">
<li id="menu-item" class="menu-item">
Bla1
</li>
<li id="menu-item" class="menu-item">
Bla2
</li>
<li id="menu-item" class="menu-item">
Bla3
</li>
</ul>
</li>
</ul>
<script>
jQuery(function($) {
$('.sub-menu').hide();
$('.sub-menu-open').parent().click(function(e){
e.preventDefault();
$(this).parent().find(".sub-menu").toggle();
});
});
</script>
Here is a working Fiddle:
https://jsfiddle.net/ehg49dso/9/
I created a bit complex list and I wish after clicking on element with class ".recipes", display it inside paragraph but after clicking on button prev or next, I wish to switch to previous or next element with same class name. I know already how to switch the list if they are next to each other but after putting them inside different parents it seems more complicated:
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>
To show clicked element:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
and to show previous element with class "recipes" I got from another person on this forum is here however because classes have different parents now, it doesn't work, I thought that i can add more parents() and because of that find previous or next ".recipes" but it didn't work out:
$(".prev").click(function() {
var isFirst = $(".recipies.active").is(":first-child");
if(isFirst){
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").prev().trigger("click");
}
});
Check this out:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
$(".prev").click(function() {
var isFirst = $(".recipies.active").text() == $($(".recipies").get(0)).text();
if (isFirst) {
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").parent().parent().prev().find(".recipies").trigger("click");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>
I'm trying to expand my filtering function for li elements in ul.
My ul structure looks like this:
<ul>
<li class="root"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>
Currently I have filter function that filters based on query among .list elements. Now I'm trying to implement it in a way, that while filtering list (still only .list elements), there would be structure history.
For example: searching for "li2.3.2" would return:
<ul>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
EDIT: For clarification and since I failed to mention that in original post...I'm trying to filter by users input (partial matching counts).
My current method works by taking users input in text input box, taking all .list elements in ul and comparing for each element if span.text contains searching text.
you should give class every floor,and use CSS filter :parent and :nth-chiled find what you want
#pc9529, yes it is possible. but here you want o display only parent li node html. So give different class to the li which is belonging from your parent UL. Look at the given solution,
$(document).ready(function(){
$("li").click(function(e){
e.stopPropagation();
if($(this).hasClass("root1"))
{
alert($('<div>').append($(this).clone()).html());
}
else{
alert($('<div>').append($(this).closest(".root1").clone()).html());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="root1"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="fa fa-chevron-down"></span><i class="fa root-checkbox fa-square-o"></i><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root1"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>
Please have a look at this JSFiddle
The JQuery finds your item by text, then find all parents that contain the ".root" class, and finally gets the last parent i.e. the root ul element of the hierarchy.
$('.list:contains("li2.3.2")').parents('.root').last().html()
I have a menu with two menu items and I want to use JQuery to display sub-menu for each menu item when the user clicks on menu item.
What happens is both submenues are displayed (where class="dropdown-content"). How can I modify my code to just display the submenu that is
under the menu item clicked. Is there any way to do that without having to specify id?
Below is my menu:
$('.menu-item').on('click', function() {
$('.dropdown-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
you need to use children() function to toggle the children of particular DOM
so use $(this).children("ul").toggle(); to accomplish what you are looking for
$('.menu-item').on('click', function() {
$(this).children("ul").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'>
<span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
The main problem is you should use this to identify the li you are cliking, and then use find() to traverse downwards along descendants of DOM elements.
$('.menu-item').on('click', function() {
$(this).find(".dropdown-content").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
I have a side menu with some menu items.
One menu items can have some submenu items
Here is how I realize this
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
I need to click on a menu item and it will show submenu items if I click once again it will hide them. How can I realize this?
See here I apply click even on li not on because on anchor you add a url of other pages, so 22 event not fired on same element.Checkout and if any issue let me know
$(document).ready(function() {
$('.main_wrapper li').on('click', function() {
$(this).children('.submenu').slideToggle();
});
});
.submenu {
display: none;
}
ul li {
background-color: #000;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<ul class="main_wrapper">
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
<li>Patient Database</li>
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
</ul>
if you use bootstrap then it will be easy to do with it.
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<!-- my changes starts here -->
<li data-toggle="collapse" data-target="#test">Calendar
<ul class="submenu collapse" id="test">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
source: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp