I am creating a menu with sub menu which opens sub-menu with slideToggle. By default it is shows the sub-menu, please tell me that how it will show only menu and not sub menu links by default.
<span>Natural Rubber Reclaim</span>
<ul>
<div id="product_tabs">
<li><a href='products.html'><span>Whole Tyre Reclaim</span></a></li>
<li><a href='inner_tube_reclaim.html'><span>Inner Tube Reclaim</span></a></li>
</div>
</ul>
<span><a href='synthatic_reclaim_rubber.html'>Synthatic Reclaim Rubber</a></span>
<a href='products_5.html'><span>Crumb Rubber</span></a>
Rubber Compounds
and this is the toggle code I am using
<script>
$(document).ready(function() {
$('.accordion:eq(0)> span').click(function() {
$(this).next().slideToggle('fast');
});
});
</script>
Try
$(document).ready(function () {
$('.accordion:eq(0) > span').click(function () {
$(this).next().slideToggle('fast');
});
$('.accordion:eq(0) > span').next().hide()
});
another solution will be is to simulate the click event
$(document).ready(function () {
$('.accordion:eq(0) > span').click(function () {
$(this).next().slideToggle('fast');
}).click();
});
Related
I need a help with mobile menu. I try to find/add some script which close menu after click on menu item. Can anybody help with.
My page is https://www.institut-vz.si/
So When you click on the menu link it's going to the section but the menu is still open. So I need some script it should close after clicking the menu link.
When you click on burger menu, "style" change from display:none to display:block, and menu item get class "inView current_page_item".
Any help please.
<nav id="main-menu" class="menu-header-menu-container">
<ul class="menu menu-toggle-open" style="display: block; overflow: visible;">
<li id="menu-item-16670" class="menu-item">Home</li>
<li id="menu-item-16673" class="menu-item inView current_page_item">Service</li>
<li id="menu-item-16676" class="menu-item">About us</li>
<li id="menu-item-16677" class="menu-item">Contact</li>
</ul>
Also mobile menu have this active JS code:
//Mobile Menu
$("#dt-menu-toggle").click(function( event ){
event.preventDefault();
var $menu = $("nav#main-menu").find("ul.menu:first");
$menu.slideToggle(function(){
$menu.css('overflow' , 'visible');
$menu.toggleClass('menu-toggle-open');
});
var $right = $("nav#main-menu").find("ul.menu-right");
if( $right.length ) {
$right.slideToggle(function(){
$right.css('overflow' , 'visible');
$right.toggleClass('menu-toggle-open');
});
}
});
Add this script in footer.php
jQuery(document).on("click",".menu-item", function(){
jQuery(".menu-item").closest(".menu").removeClass("menu-toggle-open").hide();
});
I have 2 different divs that need to appear depending on which tab is active.
If tab "#myTab class overview" is active then the "rental div" should show. If "#myTab class overview" is not active them the "homeo div" should show.
My function does not work on page load, on page load both divs appear. If i click either tab then only does my function work.
Do you know how to get my function to be working on page load.
jQuery(document).ready(function () {
jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if ($("#myTab")[0].className=='overview active')
jQuery('#rental').show(), jQuery('#homeo').hide();
else
jQuery('#rental').hide(), jQuery('#homeo').show();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rental">
DOWNLOAD APPLICATION
</div>
<div id="homeo">
Test
</div>
<ul class="nav nav-pills">
<li id="myTab" class="overview active"><a data-toggle="tab" href="#home">RENTAL</a></li>
<li><a data-toggle="tab" href="#homeowner">HOMEOWNER</a></li>
</ul>
Why not use CSS or style attribute to hide the element on pageload. Suppose you want to only show rental at page load
<div id="homeo" style="display:none;">
Test
</div>
Or with CSS
#homeo {
display: none;
}
.className is native javascript. jQuery objects don't have this property.
You want to use $("#myTab")[0].hasClass('overview')
jQuery hasClass documentation
You need to call your hide/show code on page load alongwith tab click as
jQuery(document).ready(function () {
if($('#myTab').hasClass('overview active'))
{
jQuery('#rental').show(), jQuery('#homeo').hide();
}else
{
jQuery('#rental').hide(), jQuery('#homeo').show();
}
jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if ($("#myTab")[0].className=='overview active')
jQuery('#rental').show(), jQuery('#homeo').hide();
else
jQuery('#rental').hide(), jQuery('#homeo').show();
});
})
Here is with demo
https://jsfiddle.net/jalayoza/cnsLfbza/
jQuery(document).ready(function () {
if($('#myTab').hasClass('overview active'))
{
jQuery('#rental').show(), jQuery('#homeo').hide();
}else
{
jQuery('#rental').hide(), jQuery('#homeo').show();
}
jQuery('a[data-toggle="tab"]').on('click', function (e) {
if ($("#myTab")[0].className=='overview active')
jQuery('#rental').show(), jQuery('#homeo').hide();
else
jQuery('#rental').hide(), jQuery('#homeo').show();
});
})
<div id="rental">
DOWNLOAD APPLICATION
</div>
<div id="homeo">
Test
</div>
<ul class="nav nav-pills">
<li id="myTab" class="overview active"><a data-toggle="tab" href="#home">RENTAL</a></li>
<li><a data-toggle="tab" href="#homeowner">HOMEOWNER</a></li>
</ul>
I am trying to make the drop down menu toggle on click but the JavaScript does not work with this html and css, while it works in other projects. The drop down enabled on hover before but I deleted ...: hover {display: block;}
Rest of the code in CodePen --> http://codepen.io/anon/pen/bNbzjM
HTML
<li id="active">УСЛУГИ
<div id="block_menu">
<ul class="pod_nav1">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav2">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav3">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav4">
<li>SEO Pakalpojumi</li>
</ul>
</div>
</li>
JavaScript
$(document).ready(function () {
$("li").click(function () {
$('li > ul ').not($(this).children("ul").toggle()).hide();
});
});
CSS
may be this will help. don't forget to include jquery.js
$("li").on('click',function() {
$('li > ul ').not($(this).children("ul").toggle()).hide();
});
View Live jsFiddle
j- Query
$(document).ready(function () {
$("li").click(function () {
$(this).children().children().toggle();
});
});
issue is in javascript plz check below code
$(document).ready(function () {
$("li").click(function () { $(this).find('#dropmenu').children('ul').toggle('slow');
});
});
I want to create a java-script-Drop-Down-Menu for a mobile site.
The problem is, that when I click on a list-item in level2, by the toggle of level1 the list-item of level2 (and level3) gets closed, so I have to click at the list-item of level1 again to see level2 and level3. How can I deactivate the toggle of level1 if I click on a list-item of level2?
Please point me to the right direction. Thank you!
Here's my html:
<div id="menu">
<ul>
<li class="level1"><a href="/xyz.html">
<li class="level1"><a href="/xyz.html">
<ul>
<li class="level2"><a href="/xyz.html">
<li class="level2"><a href="/xyz.html">
<ul>
<li class="level3"><a href="/xyz.html">
<li class="level3"><a href="/xyz.html">
</ul>
<li class="level2"><a href="/xyz.html">
</ul>
<li class="level1">
<li class="level1">
</ul>
</div>
Here's my jquery:
$(document).on('pageinit',function(e,data){
// close menu if you go to another page
$('#menu').hide();
$('.level2').hide();
$('.level3').hide();
// Do not link if a sub-menu is present
$('li:has(ul) > a').replaceWith(function() {
return $(this).text();
});
// at click on menu-button scroll to top and open menu
$(document).off('click', '#menuicon').on('click', '#menuicon',function(e) {
$('html, body').stop().animate({ scrollTop : 0 }, 0);
$('#menu').slideToggle(400);
});
// elements of the menu, different sub-menus width different classes
$('#menu').on('click','.level1',function(e) {
$(this).find('.level2').slideToggle();
});
$('#menu').on('click','.level2',function(e) {
$(this).find('.level3').slideToggle();
});
$('#menu').on('click','.level3',function(e) {
$('.level3').hide();
$('.level2').hide();
$('.level1').hide();
$('#menu').hide();
});
});
use e.stopPropagation();
$('#menu').on('click','.level1',function(e) {
e.stopPropagation();
$(this).find('.level2').slideToggle();
});
$('#menu').on('click','.level2',function(e) {
e.stopPropagation();
$(this).find('.level3').slideToggle();
});
$('#menu').on('click','.level3',function(e) {
e.stopPropagation();
$('.level3').hide();
$('.level2').hide();
$('.level1').hide();
$('#menu').hide();
});
I wrote a dropdown menu with the following structure. It is supposed to drop down on click, and close on click.
Here's the HTML
<ul id="nav" class="nav">
<li>
<a id="menu1" class="menu">MENU 1</a> <!-- top menu -->
<div id="submenu1" class="submenu"> <!-- hidden by default -->
SUBMENU ITEM 1 <!-- submenu item -->
SUBMENU ITEM 2
</div>
</li>
<li>
<a id="menu2" class="menu">MENU 2</a>
<div id="submenu2" class="submenu">
SUBMENU ITEM 1
SUBMENU ITEM 2
SUBMENU ITEM 2
</div>
</li>
</ul>
And that's the JavaScript (using jQuery)
$("#menu1").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu1").toggle(); // open this menu
});
$("#menu2").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu2").toggle(); // open this menu
});
$("#menu3").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu3").toggle(); // open this menu
});
$("#menu4").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu4").toggle(); // open this menu
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("nav"))
$("div.submenu").hide();
});
There is a lot of repetition in the first part of the JS, is there a way to make this shorter, nicer, better?
You should be able to reduce the script to:
$(".nav .menu").click(function() {
$("div.submenu").hide(); // hide all menus
$(this).next().toggle(); // open this menu
});
$(document).click(function(e) {
if (! $(e.target).parents().hasClass("nav"))
$("div.submenu").hide();
});
Yes:
var $submenus = $('.submenu');
$(".menu").click(function(e){
var $menu = $(this).next('.submenu').toggle();
$submenus.not('#' + $menu[0].id).hide();
e.preventDefault();
});
$(document).click(function(e){
if( !$(e.target).closest('.nav').length ) $submenus.hide();
});