I have a click handler on the "top level" <li>s that I want to hide all the content below the <li>s and then show the content below the particular <li> that was clicked.
The hiding works, but the showing does not.
$('.menu li').click(function() {
$('.submenu').hide();
var myclass = $('submenu');
$(this).show($submenu)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football
</li>
<li>cricket
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<li>Hockey
</li>
<li>Baseball
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
Try this.
It hides the submenu with CSS.
Then it toggles the submenu when you click the list item.
If you only want one submenu to be shown at once, uncomment the line in the js.
$('.menu li').has('.submenu').click(function(e) {
e.preventDefault();
$(this).find('.submenu').slideToggle();
});
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
You should try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<script type="text/javascript">
$('.submenu').hide();
$(document).on("click",".menu li",function(){
$(this).find('.submenu').slideToggle();
});
</script>
You are using jQuery and there is toggle() function for show/hide toggle and use like this
$('.submenu').toggle();
and I fixed your script that doesn't work.
$('.menu li').click(function(){
$('.submenu').hide();
$(this).find('.submenu').show();
});
Working fiddle
Related
I have this super easy JS that does one thing; namely toggles an open class on a specific element in the page. Problem is that I have 4 repetitions of both the .clickSlide element and the .sub_menu element and when I click one of the elements to trigger the code all elements gets the open class. Only the element of concern, out of the 4, should get the open class.
My best guess is I am missing some sort of this in the JS. But I am open to solutions on this one!
jQuery(document).ready(function($) {
$(".clickSlide").click(function() {
$(".sub_menu").toggleClass("open");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ht_course_one">
<ul class="select-menu dropdown">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_two">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_three">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_four">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
So the solution (based on Anass Kartit answer) was this:
jQuery(document).ready(function($) {
$(".clickSlide").click(function(){
$(this).children(".sub_menu").toggleClass("open");
});
});
When I click on open it toggles all of the submenus. I want to toggle only the exact ul under the li.
$(document).ready(function(){
$(".has-children>a").click(function(event){
event.preventDefault();
});
$('.has-children').click(function() {
$(this).find('>ul').toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
You can achieve this by changing find() to children() to target only direct children of the li.
$(document).ready(function(){
$(".has-children>a").click(function(event){
event.preventDefault();
});
$('.has-children').click(function() {
$(this).children('ul').toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
This however causes a problem where clicking on children of children will close the menu, so instead you can use a tag and the jQuery next() function to toggle instead of children() or find() like this:
$(document).ready(function() {
$(".has-children>a").click(function(event) {
event.preventDefault();
$(this).next().toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
This also makes your script much shorter.
I have a menu that has 3 list options. Inside each of these list options there is another unordered list that has 2 list options inside.
Inside the unordered list with two options the first list item is an image and the second is a link.
When the user clicks one of the links, I want that current whole group(consisting of the image and the link) to stay showing while the other 2 menu options disappear.
I am having trouble coming up with the right selection.
$('.menu ul>li>ul>li:last-child>a').click(function() {
var currentLink = $(this);
var currentGroup = $(this).closest('li').closest('li');
$('.menu ul>li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link One</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Two</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Three</li>
</ul>
</li>
</ul>
</div>
The problem is $('.menu ul>li') which selects all li including the second level one's.
So try
$('.menu ul ul li:last-child > a').click(function() {
var currentGroup = $(this).closest('.menu > ul > li');
$('.menu > ul > li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link One
</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Two
</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Three
</li>
</ul>
</li>
</ul>
</div>
I have a menu:
<ul>
<li class="menu-item">
about
</li>
<li class="menu-item">
contact
</li>
</ul>
How can I add the target="_parent" to all links with the class "menu-item". How can I do this with jquery
This will do it:
$('.menu-item').attr('target', '_parent');
as you commented, if the menu-item class is attached to li elements then do;
$('.menu-item > a').attr('target', '_parent');
Or as an addition to the answer from keune for modern jQuery:
$(document).ready(function () {
$('li.menu-item').prop('target', '_parent');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item"> about
</li>
<li class="menu-item"> contact
</li>
</ul>
What I have are multiple links in my nav bar but am having changing the ul class.
There are just two of my buttons on this page I need to change the ul class form select to current and the current to select.
<div class="nav">
<ul class=" current">
<li>
Home
<div class="select_sub">
<ul class="sub">
<li></li>
</ul>
</div>
</li>
</ul>
<ul class=" select">
<li>
About
<div class="select_sub">
<ul class="sub">
<li>About Us</li>
<li>What are we</li>
</ul>
</div>
</li>
</ul>
</div>
$(document).ready(function() {
$('.select').click(function () {
$('.current').removeClass('current').addClass('select');
});
});
You have lot of syntax errors .There is no need of using quotes for this and you missed ; at the end
replace
$('this').removeClass('select')
with
$(this).removeClass('select');
or use
$(this).removeClass('select'.)addClass("current");
$(document).ready(function() {
$('.current').click(function(){
$(this).removeClass('select'.)addClass("current");
});
});