I am using this dropdown multiple times and want only one to be open (the others when i click to close):
$(".dropdown-tree-a").click(function () {
if($(this).parents().hasClass('open-tree'))
{
$(this).parent().removeClass("open-tree")
}
$(this).parent('.dropdown-tree').toggleClass("open-tree active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-tree">
<a class="dropdown-tree-a"> <span class="badge pull-right">42</span> WOMEN COLLECTION </a>
<ul class="category-level-2 dropdown-menu-tree">
<li> Shirt </li>
<li> Fragrances </li>
<li>Scarf </li>
<li>Sandal </li>
<li>Winter Collection </li>
<li>Men Accessories </li>
</ul>
</li>
when click on ".dropdown-tree-a" the current dropdown is opened but the others don't close (remove the class open-tree)
Can someone please tell me what i did wrong?.
Thanks in Advance
here is the most simple & easy solution
jQuery(".dropdown-tree-a").click(function (e) {
e.preventDefault();
jQuery(".dropdown-tree").removeClass("open-tree active");
/** FIRST REMOVE CLASSES FROM ALL ELEMENTS **/
jQuery(this).parents('.dropdown-tree').addClass("open-tree active");
/** IN NEXT STEP FIND PARENT item with class '.dropdown-tree' and then add classes 'open-tree active'. USe Css to display child items **/
});
li.dropdown-tree ul.dropdown-menu-tree{
display:none;
}
li.dropdown-tree.open-tree.active ul.dropdown-menu-tree{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-tree">
<span class="badge pull-right">42</span> WOMEN COLLECTION
<ul class="category-level-2 dropdown-menu-tree">
<li> Shirt </li>
<li> Fragrances </li>
<li>Scarf </li>
<li>Sandal </li>
<li>Winter Collection </li>
<li>Men Accessories </li>
</ul>
</li>
<li class="dropdown-tree">
<span class="badge pull-right">42</span> WOMEN COLLECTION
<ul class="category-level-2 dropdown-menu-tree">
<li> Shirt </li>
<li> Fragrances </li>
<li>Scarf </li>
<li>Sandal </li>
<li>Winter Collection </li>
<li>Men Accessories </li>
</ul>
</li>
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 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/
I create submenu and I need to get value of direct parent for Submenu"li"
this is my code
<div class="box">
<div class="col-sm-6">
<!-- main menu-->
<ul>
<li class="m-sub">
Cars
<!-- sub menu for cars-->
<ul class="sub">
<li> Audi</li>
<li> KiA</li>
</ul>
</li>
<li class="m-sub">
Tablets
<!--start sub menu for tablet -->
<ul class="sub">
<li> Phone</li>
<li> Sony</li>
</ul>
</li>
<li> Laptop</li>
<li> Glass </li>
</ul>
</div>
</div>
I need to get direct parent of sony for example, when I use ($(this).parent()).text() the result was phone not tablet.
I need to get value of parent "tablet" ,when select Audi i need to get cars
thanks in advance.
Tablets isn't inside the direct parent of your list item; you'll need a bit more jQuery:
var li = $('.sub > li')
console.log(
li.closest('.m-sub').contents().eq(2).text().trim() //=> 'Tablets'
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="m-sub">
<span><i class="icon-tablet"></i></span> Tablets <span class="leftarr"><i class="icon-chevron-right"></i></span>
<ul class="sub">
<li> Phone
</li>
<li> Sony
</li>
</ul>
</li>
<li> Laptop
</li>
<li> Glass
</li>
</ul>
I am trying to make my header with the Ink framework (CSS/JS) fixed so it does not move on the page while scrolling and I can't seem to make it so.
HTML:
<div id="topbar">
<nav class="ink-navigation ink-grid hide-all show-large">
<ul class="menu horizontal flat blue">
<li>
Home
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item<i class="icon-caret-down"></i>
<ul class="submenu">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<nav class="ink-navigation ink-grid hide-all show-medium show-small">
<ul class="menu vertical flat blue">
<li>
<a class="logoPlaceholder push-left" href="#" title="Site Title">Home</a>
<button class="toggle push-right" data-target="#topbar_menu" id="toggleVisibility">
<span class="icon-reorder"></span>
</button>
</li>
</ul>
<ul class="menu vertical flat blue hide-all" id="topbar_menu">
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li class="">
<a class="toggle" data-target=".submenu" href="#">Menu item<i class="icon-caret-down"></i></a>
<ul class="submenu hide-all dropdown">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<div class="border">
</div>
</div>
I've looked and tried toggling around with the CSS package but could not get it going.
Any help would be appreciated!
are you using last version release or are you using the source from github?
In last version release we have a bug and it does not work if the element is wider than 90% of the viewport width.
Get the last build from https://github.com/sapo/Ink/tree/develop/dist and use:
<div id="topbar" data-offset-top="0" class="sticky" data-activate-in-layouts="large,medium,small">
....
attribute "data-activate-in-layouts" is optional to make it work in the selected viewport sizes.
I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...
This is my code so far...
<li>
<i class="icon-picture icon-white"></i> Galleries
<div class="nav-collapse88">
<ul>
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</div>
</li>
So when I click on galleries the options Add and Delete should appear. Any suggestions?
I would nest ul's like so:
<ul>
<li>
<a class="expand">Link used to expand</a>
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
The I would use this jquery:
$(document).on('click', 'a.expand', function(e) {
e.preventDefault();
$(this).siblings('ul').slideToggle();
});
You would need to set the sub menu CSS to display none.
Something along these lines should do the trick.
This works:
<ul>
<li class="dropdown">
Support
<ul class="dropdown-menu" role="menu">
<li><i class="icon-play"></i> Add</li>
<li><i class="icon-play"></i> Delete</li>
</ul>
</li>
</ul>
I believe you want the class to be dropdown not collapse. That's how the bootstrap documentation recommends it for menus.
Change the class to be dropdown, remove the inner div, and add the class dropdown-menu the inner ul.
<li class="dropdown">
<i class="icon-picture icon-white"></i>>Galleries
<ul class="dropdown-menu">
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</li>
tyy this http://jsfiddle.net/68RXP/213/
$(function(){
$(".nav-collapse88").hide();
$("a").click(function(e){
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
<li>
<a href="?op=1">
<i class="icon-picture icon-white"></i> Galleries</a>
<div class="nav-collapse88">
<ul>
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</div>
</li>