jQuery slideToggle doubling up..?

jQuery slideToggle doubling up..? - javascript

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/

Related

How do I open sub menu on click on span?

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">&#9660</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/

JQuery display menu items one at a time

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>

Zurb Foundation dropdown position to very first parent

In Foundation 6 by default, dropdown menus appear on the same level as the parent like so:
Is there a way to make it so that the menu appears on the same level as the first menu? This is the desired outcome:
I have looked through the documentation and cannot seem to find a way to do it. Thanks in advance!
This is a snippet of the default code from Foundation site
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li>Item 1A Loooong
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
</ul>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
</ul>
</li>
</ul>
</li>
<li>Item 1B
</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A
</li>
<li>Item 2B
</li>
</ul>
</li>
<li>Item 3
</li>
<li><a href='#'>Item 4</a>
</li>
</ul>
Here is a fiddle of the default: http://jsfiddle.net/65017wc2/

Here is a possible fix to do this :
.dropdown.menu {
top: 0!important;
}
.dropdown.menu {
position: relative;
}
.dropdown.menu li {
position: static !important;
}
.dropdown.menu ul {
margin-top: -1px;
}
I overwrite the relative position of li elements to the native static position and made the main ul relative, so all the dropdown menus are relative to the main ul menu.
See this fiddle

Javascript, how to list different things when clicking different button

I am new to javascript, forgive me asking the simple question.
Is there anyone could guide me how to use javascript to dynamically list different things when clicking different button.
For example: Like this link:
when I click the Brand development, ecommerce development, it will list all related items.

I create an example on jsFiddle, please check from here
The HTML content is like:
<ul class='product-catlogs'>
<li><a class='product'>All</a>
</li>
<li><a class='books'>Books</a>
</li>
<li><a class='mobiles'>Mobiles</a>
</li>
<li><a class='cars'>Cars</a>
</li>
<ul class='product-list'>
<li>
<div class='product books'>book1</div>
</li>
<li>
<div class='product books'>book2</div>
</li>
<li>
<div class='product books'>book3</div>
</li>
<li>
<div class='product mobiles'>Iphone</div>
</li>
<li>
<div class='product mobiles'>Sumsang</div>
</li>
<li>
<div class='product cars'>Mercedes</div>
</li>
<li>
<div class='product cars'>Toyota</div>
</li>
<li>
<div class='product cars'>Ford</div>
</li>
The js code is like:
$('.product-catlogs a').click(function (e) {
var tag = this.className;
$('ul li .' + tag).parent().show();
$('ul li div').not('.' + tag).parent().hide();
})

Expand menu, show submenu

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>

Develop Reference

JavaScript is the programming language of the Web.

jQuery slideToggle doubling up..? - javascript

Related

How do I open sub menu on click on span?

JQuery display menu items one at a time

Zurb Foundation dropdown position to very first parent

Javascript, how to list different things when clicking different button

Expand menu, show submenu

Categories

Resources