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>
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 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 am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/
So, guys, basically what I need to find:
----> All <li> which has <ul> without ANY class.
In this example I would ONLY want the <li> parent of the commented <ul>:
HTML
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li> <!--------- Just Need This One ---------->
<a>Item 2</a>
<ul>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I'm aware of .not("[class]"), and so I tried something like:
$('#myList li').has('ul').not("[class]")
which obviously doesn't work because jQuery is looking for <li>'s which have a nested <ul> but doesn't have any class.
So, guys, can anyone please help? :)
Instead of using
$('#myList li').has('ul').not("[class]")
you can use
$('#myList > li').has('ul:not([class])')
you can also use this selector
$('#myList > li:has(ul:not([class]))')
$('#myList > li:has(ul:not([class]))').css('background' , 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Use filter() over li and then check for children ul without any class with .length,
$('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
//or $('> ul:not([class])',this) in case of direct <ul>
});
var $li = $('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
});
console.log($li)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Try $('#myList li ul').filter(':not([class])'):
console.log($('#myList li ul').filter(':not([class])').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I really hate that 'too short to be an answer' ....
$('#myList li > ul:not([class])')
Seems to be the simplest one that does the job ?
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