Ok I am trying to create an accordance style menu with sub-menu in it but when I click the hamburger button, my secondary sub-menu also shows up by default. How to hide "list 2" when first click on the hamburger? I mean when click on hamburger only show "list 1" without showing "list 2" until you click on "list 1".
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$(".primary-list").slideToggle("fast");
});
});
$(document).ready(function() {
$(".primary-list").click(function() {
$(".standard-list").slideToggle("fast");
});
});
</script>
</head>
<body>
<button>☰</button>
<ul>
<li class="primary-list">list 1
<ul>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
</ul>
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
</ul>
</body>
</html>
Just add $(".standard-list").slideToggle("fast"); at first in the document.ready() function.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".standard-list").slideToggle("fast");
$("button").click(function() {
$(".primary-list").slideToggle("fast");
});
});
$(document).ready(function() {
$(".primary-list").click(function() {
$(".standard-list").slideToggle("fast");
});
});
</script>
</head>
<body>
<button>☰</button>
<ul>
<li class="primary-list">list 1
<ul>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
</ul>
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
<li class="primary-list">list 1
</li>
</ul>
</body>
</html>
first - use just one $(document).ready();
second - use $(this)
3rd - its better to use .on(); its avoid any errors you will may facing
4th - you can use display: none; for your sub-menu css or add $(".standard-list").hide(); to hide your sub-menu on load
<script>
$(document).ready(function() {
$("button").on('click',function() {
$(".primary-list").slideToggle("fast");
});
$(".primary-list").on('click',function() {
$(this).find('ul').slideToggle("fast");
});
});
</script>
JSFIDDLE
The problem is that standard-list is inside of primary-list, so when you click on standard, you also click on primary. You need the class on something that is not wrapped around the standard list.
<li class="primary-list"><a class="toggle-standard" href="#">list 1</a>
<ul>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
<li class="standard-list">list 2
</li>
</ul>
</li>
$(document).ready(function() {
$("button").click(function() {
$(".primary-list").slideToggle("fast");
});
});
$(document).ready(function() {
$(".toggle-standard").click(function() {
$(".standard-list").slideToggle("fast");
});
});
Fiddle: https://jsfiddle.net/Forklift/7w73otch/
Related
I'm trying to build a mega menu in Shopify, this is what I have in my HTML:
$('.has-child').on('click', function(event) {
event.preventDefault();
$(this).find('.child').toggleClass('menu-visible');
$('.child').click(function(e) {
e.stopPropagation();
});
});
.menu-visible{
color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
It's working as long as I'm clicking to open and close the same parent menu but the issue I'm having is once I click on one parent menu item and then click on another parent menu item it will open the second menu on the first (so if I click on "Shop" and then click "About" it will open the "About" menu on top of the "Shop" menu). I know I need to get it to remove the "menu-visible" class once I click another parent link but I just don't know how... I tried something with .siblings() but it didn't work, maybe I used it wrong...
Any ideas?
-Thanks.
Basically what you need is to add the display none to all the other children and toggle the one that you are clicking, by using the not() function you can achieve this without an if statement
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<meta charset="utf-8">
<style type="text/css">
.d-none{
display: none;
}
</style>
</head>
<body>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child d-none">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child d-none">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.parent-main a').click(function(e){
e.preventDefault();
$('.child').not($(this).parent().find('.child')).addClass('d-none');
$(this).parent().find('.child').toggleClass('d-none');
})
});
</script>
</body>
</html>
$('.has-child').on('click', function(event) {
event.preventDefault();
$(event.currentTarget)
.find('.child')
.toggleClass('menu-visible')
.parent()
.siblings()
.find('.child')
.removeClass('menu-visible')
$('.child').click(function(e) {
e.stopPropagation();
});
});
Simply first remove class from all elements then re-apply on just wanted one.
use if ($(this).find('.child').hasClass("menu-visible")) { in order to toggle and remove from others in same time
$('.has-child').on('click', function(event) {
event.preventDefault();
if ($(this).find('.child').hasClass("menu-visible")) {
$('.child').removeClass("menu-visible")
$(this).find('.child').removeClass('menu-visible');
} else {
$('.child').removeClass("menu-visible")
$(this).find('.child').addClass('menu-visible');
}
$('.child').click(function(e) {
e.stopPropagation();
});
});
.menu-visible {
display: block !important;
}
.child {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
This one should solve your problem.
$('.has-child').on('click tap', function(event) {
event.preventDefault();
if ($(this).find('.child').hasClass('menu-visible')) {
$(this).find('.child').removeClass('menu-visible'); // toggle current
} else {
$('.menu-visible').removeClass('menu-visible'); // close all
$(this).find('.child').addClass('menu-visible'); // open current
}
});
I have a list of items where those items have their own content organized as lists. So far I have my jQuery expand the list to see the items for their lists. When clicking another item reverting the previously click item to be not expanded.
$(document).ready(function() {
$("li").click(function(){
$(this).find("ul.bid_project").toggleClass("expanded" , 500);
var list_items = $(this).find("ul.bid_project > li.bidding_content");
if(!list_items.is(':visible')){
list_items.show();
} else {
list_items.hide();
}
$(this).siblings().each(function() {
if($(this).find("ul.bid_project").hasClass("expanded")) {
$(this).find("ul.bid_project").toggleClass("expanded", 500);
$(this).find("ul.bid_project > li.bidding_content").hide();
}
});
});
});
My problem is that if I furiosily click on all of li that has the click eventhandler, they each run their own function to expand and check expansion. Is it possible to wait for only one click to be made then continue taking clicks other click on other nodes?
<ul id="bids" class="current_bids_container">
<li>
<ul class="bid_project">
<p class="bidding_title">NYC MTA Above Grade Facility Hardening</p>
<li class="bidding_content">• Lmao </li>
<li class="bidding_content">• Lmao </li>
<li class="bidding_content">• Lmao </li>
<li class="bidding_content">• Lmao </li>
</ul>
</li>
<li>
<ul class="bid_project">
<p class="bidding_title">CONEY ISLAND HOSPITAL PARKING LOT</p>
<li class="bidding_content">• Lmao </li>
<li class="bidding_content">• Lmao </li>
<li class="bidding_content">• Lmao </li>
<li class="bidding_content">• Lmao </li>
</ul>
</li>
</ul>
I just created this Code Snippet below.
I think the solution is to remove the duration from the toggleClass Method and instead use CSS for animations.
Additionally I recommend to NOT place any non-"li"-elements inside an "ul"-element. Just a best practice. Another best practice is to use dash in CSS classnames instead of underscores ("bidding-content" instead of "bidding_content").
Hope this helps.
$(document).ready(function() {
// start website with all collapsed
$("#bids li.bidding-content").hide();
// expand / collapse on click
$("li").click(function() {
$(this).find("ul.bid-project").toggleClass("expanded");
var list_items = $(this).find("ul.bid-project > li.bidding-content");
if(!list_items.is(':visible')){
list_items.show();
} else {
list_items.hide();
}
$(this).siblings().each(function() {
if($(this).find("ul.bid-project").hasClass("expanded")) {
$(this).find("ul.bid-project").toggleClass("expanded");
$(this).find("ul.bid-project > li.bidding-content").hide();
}
});
});
});
ul {
list-style-type: none;
}
ul.bid-project {
opacity: 0;
transform: translateY(-25px);
}
.expanded {
transition: 1s;
opacity: 1 !important;
transform: translateY(0px) !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="bids" class="current-bids-container">
<li>
<p class="bidding-title">NYC MTA Above Grade Facility Hardening</p>
<ul class="bid-project">
<li class="bidding-content">• Lmao </li>
<li class="bidding-content">• Lmao </li>
<li class="bidding-content">• Lmao </li>
<li class="bidding-content">• Lmao </li>
</ul>
</li>
<li>
<p class="bidding-title">CONEY ISLAND HOSPITAL PARKING LOT</p>
<ul class="bid-project">
<li class="bidding-content">• Lmao </li>
<li class="bidding-content">• Lmao </li>
<li class="bidding-content">• Lmao </li>
<li class="bidding-content">• Lmao </li>
</ul>
</li>
</ul>
Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle
I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/
Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});