I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>
Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/
Related
I'm trying to add "active" class to menu when user clicks on the button but for some reason it's not working correctly. They have to click really fast and two times. I've tried both click and on click function but still not working.
$('#menu li').click(function() {
$('#menu li.active').removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="menu">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Services
</li>
<li class="nav">Gallery
</li>
<li class="nav">Contact
</li>
</ul>
</div>
you must handle active li after page loaded.Add this at the end of your code:
var curruntLocation = window.location.href;
$('#menu li a').each(function ()
{
var thisHref = $(this).attr('href');
if (curruntLocation.indexOf(thisHref) > 0)
{
$(this).parent().addClass('active');
}
});
The links included in the menu items are reloading the page while clicking and when the page is reloaded, the initial setting comes first. You can use preventDefault() if you'd like to run the function but then, your links won't work.
I suggest you use anchors instead of query string.
I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>
This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/
I have a menu called css menu.
When I click onto a link I want to close all popups that are open without the
main menu.
I have found some examples, but they are not working for me.
$('#cssmenu a').on('click', function() {
if ($(this).find('ul').is(':visible')) {
// Close the menus
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='cssmenu'>
<ul>
<div id='menuspace'></div>
<li><a href='/0/wall/' class='ajaxtrigger'><span>Home</span></a>
</li>"
<li class='active has-sub'><a href='#'><span>Media</span></a>"
<ul>
<li class=''>
<a href='/0/youtube/' class='ajaxtrigger'> <span>Youtube</span>
</a>
</li>
<li class=''><a href='/0/soundcloud/' class='ajaxtrigger'><span>Soundcloud</span></a>
</li>
<li class=''><a href='/0/mixcloud/' class='ajaxtrigger'><span>Mixcloud</span></a>
</li>
<li class=''><a href='/0/pictures/' class='ajaxtrigger'><span>Pictures</span></a>
</li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>About</span></a>"
<ul>
<li class=''><a href='/0/biography/' class='ajaxtrigger'><span>Biography</span></a>
</li>
<li class=''><a href='/0/discography/' class='ajaxtrigger'><span>Discography</span></a>
</li>
<li class=''><a href='/0/agenda/' class='ajaxtrigger'><span>Agenda</span> </a>
</li>
<li class=''><a href='/0/releases/' class='ajaxtrigger'><span>Releases</span></a>
</li>
</ul>
</li>
<li class='last'><a href='/0/contact' class='ajaxtrigger'><span>Contact</span></a>
</li>
</ul>
</div>
This can help you! http://jsfiddle.net/Lxf2dLtL/
$('#cssmenu a').on('click', function(e){
e.preventDefault();
$('#cssmenu ul ul').hide();
$(this).next().show();
});
try this out:
$('#cssmenu a').on('click', function(){
$('ul li ul').each(function(){
$(this).hide();
});
});
You can use the :has() function to check if the menu item has a submenu. Then by using the next() function, you can toggle the submenu.
$('#cssmenu li:has(ul) a').on('click', function(e) {
e.preventDefault();
$('#cssmenu li ul').hide();
$(this).next('ul').show();
});
DEMO
Alternativ
This alternativ does the same as the code above. But it will also close the active menu when it's already open.
$('#cssmenu li:has(ul) a').on('click', function(e) {
e.preventDefault();
if( $(this).hasClass('activeSubmenu') ) {
$(this).removeClass('activeSubmenu').next('ul').hide();
}
else {
$('.activeSubmenu').removeClass('activeSubmenu').next('ul').hide();
$(this).addClass('activeSubmenu').next('ul').show();
}
});
DEMO
I've done this, hope it helps you
$('.has-sub > a').on('click', function(e) {
e.preventDefault();
$("li ul").fadeOut(0);
$(this).parent().find("ul").fadeIn();
});
li ul { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='cssmenu'>
<ul><div id='menuspace'></div>
<li><a href='#' class='ajaxtrigger'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Media</span></a>
<ul>
<li class=''><a href='/0/youtube/' class='ajaxtrigger'> <span>Youtube</span></a></li>
<li class=''><a href='/0/soundcloud/' class='ajaxtrigger'><span>Soundcloud</span></a></li>
<li class=''><a href='/0/mixcloud/' class='ajaxtrigger'><span>Mixcloud</span></a></li>
<li class=''><a href='/0/pictures/' class='ajaxtrigger'><span>Pictures</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>About</span></a>
<ul>
<li class=''><a href='/0/biography/' class='ajaxtrigger'><span>Biography</span></a></li>
<li class=''><a href='/0/discography/' class='ajaxtrigger'><span>Discography</span></a></li>
<li class=''><a href='/0/agenda/' class='ajaxtrigger'><span>Agenda</span> </a></li>
<li class=''><a href='/0/releases/' class='ajaxtrigger'><span>Releases</span></a></li>
</ul>
</li>
<li class='last'><a href='#' class='ajaxtrigger'><span>Contact</span></a></li>
</ul>
</div>
Okay this have did it for 90%.
$('#cssmenu a').on('click', function(e){
e.preventDefault();
$('#cssmenu ul ul').hide();
$(this).next().show();
The only thing that have changed now is that the menu not popup on mouse over and in te mobile version the main top menu that opens the sub menus not close. only the sub menus closes.. is ther a other way then :
.hide();
Thanks guys.
I have found the solution for my problem.
$('#cssmenu a').on('click', function(e){
e.preventDefault();
$('#cssmenu li ul').css("display", "none");
$(this).next().show();
$('#menu-button').parent().removeClass('open');
});
To close the main mobile menu button on click i have added this in the script
$('#menu-button').parent().removeClass('open');
And added in the css script this
#cssmenu li ul { display: block; }
The only thing that was left on page load to block the li ul again.
That fixed it all.
Thanks all
I have a .slideToggle making a list dropdown, but unfortunately it makes all lists dropdown, I need to make it only dropdown the list below the a that I'm clicking on. Sure this is a simple issue, still pretty new to jquery.
Jsfiddle: http://jsfiddle.net/darcyvoutt/shErA/
The following finds the next ul element and runs slideToggle() on it.
$(document).ready(function () {
$('.nav-filters-list-item a').click(function () {
$(this).next('ul').slideToggle(70);
});
});
See this jsFiddle
Try adding an id for each dropdown like this:
<ul class="nav-filters-list">
<li class="nav-filters-list-item" id="genre">Genre
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item" id="tags">Tags
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item">Date
</li>
<li class="nav-filters-list-item">Order
</li>
</ul>
Javascript:
$(document).ready(function () {
$('#genre a').click(function () {
$('#genre ul').slideToggle(70);
});
$('#tags a').click(function () {
$('#tags ul').slideToggle(70);
});
});
I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>
Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle
I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );