I have a question about jQuery. When I am using hide/show then it's working but when i try use toggle() instead then it's doesn't work. What's the problem?
Thanks in advance.
This is my code:
/* Dropdown menu - Start */
jQuery(document).ready(function() {
$('.enmenu').on('click', function(){
$('.ensettings').toggle();
return false;
});
$('html, body').on('click',function(){
$('.ensettings').hide();
});
$(".ensettings").click(function(e){
e.stopPropagation();
});
});
/* Dropdown menu - End */
Related
I have a two-level dropdown that's working great, but when I add another level, the JS seems to be removing the open class from the previous submenu, which means that the desired third-level menu can't be seen, even though it does get the open class added.
I've tracked it down to this JS:
$(function() {
$('li.dropdown-submenu').on('click', function(event) {
event.stopPropagation();
if ($(this).hasClass('open')){
$(this).removeClass('open');
} else {
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');
}
});
});
This is, I think, doing the undesired closing of the previous submenu. The HTML is very similar to this example.
Using an adaptation of the JS from that example, I get the third level, but then any given open submenu doesn't automatically close when clicking another submenu.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Need the best of both here!
I think you almost had it, you just needed to look for the different clicks.
The approach I took below was to handle all a clicks but then check to see if it had a class of test which then followed your code verbatim or else, if it didn't have a class of test it then hides all the submenus and goes to it's default href.
<script>
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
if ($(this).hasClass('test')) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
} else {
$('.dropdown-submenu ul').hide();
}
});
});
</script>
Your updated working example: https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA
Maybe this is what are you looking for.
This code to close submenu when clicking another submenu.
Javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
/* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */
$(this).next('ul').find('.dropdown-menu').each(function(){
$(this).hide();
});
/* This is to find another dropdown-menu have has been opened and hide its submenu */
var xw = $(this);
$(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function(){
if($(this).next("ul").is(":visible")){
$(this).next("ul").hide();
}
});
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
And JSFiddle example : https://jsfiddle.net/synz/vasho634/
I hope this is what you want. Here is the Solution, Not Full Proof but upto that extent whre you want
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");
if(siblingUl == "block"){
$(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();
}
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
this is my code for a menu that comes in from the right side... heres is the js
jQuery(document).ready(function($) {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap'),
$sidebarArrow = $('.sidebar-menu-arrow');
$content = $('.content');
// Hamburger button
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
$content.toggleClass('content-background');
});
// Sidebar navigation arrows
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
i want it to close automatically when clicked outside anywhere out side the menu. how can i do this.
Simply do as follow:
$(document).click(function (e)
{
var container = $(".toggle-button");
if ((!container.is(e.target))) // if the target of the click isn't the TOGGLE BUTTON...
{
// Code to hide the menu
$('.toggle-button').toggleClass('button-open');
$('.menu-wrap').toggleClass('menu-show');
$('.content').toggleClass('content-background');
}
});
That's it
Enjoy coding :)
Hope this helps you.
$('body').click(function() {
//add your code here to hide the menu
});
I have a demo for 3rd Level Navigation that is not being triggerd correctly,
not sure where im missing something
DEMO
JS :
$(function(){
$(".dropdown-menu").css("height","auto");
$("#navigation div > .mobile-drop-button").on("click",function(e){
alert('1st level');
e.preventDefault();
if(!$(this).next().next().hasClass("current")){
$(".dropdown-menu").removeClass("current");
$(".dropdown-menu").slideUp();
$(this).next().next().addClass("current");
$(this).find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/up_arrow_white.png');
$(this).parent().siblings().find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/down_arrow_white.png');
$(".current").slideToggle();
}
else{
$(this).next().next().slideUp();
$(this).next().next().removeClass("current");
}
e.stopImmediatePropagation();
});
});
/*****
3rd level SUB NAVIGATION STARTS
******************/
$('a.mobile-drop-button.sub img').on("click", function(e){
alert('3rd level');
$(this).addClass('activeSubNav')
$(".dropdown-menu-sub").show();
e.preventDefault();
})
/*****
SUB NAVIGATION ENDS
******************/
Appreciate your help!
Thanks!!
I have fixed the Issue by using jQuery "slideToggle & sibblings()", as this HTML was so complicated that i dint find correct DOM Flow.
Finally Fixed :-)
JS :
$('#navigation .mobile-drop-button-sub').on('click', function(){
var abc = $(this).closest('.menu-option-sub').find('.dropdown-menu-sub').css({'height':'auto'}).height();
//$(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc})
$(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc})
$(this).closest('.menu-option-sub').find('ul.dropdown-menu-sub').slideToggle('fast', function(){
$(this).css('height', abc);
$(this).closest('.menu-option-sub').siblings().find('ul.dropdown-menu-sub').css('display','none');
/* $(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({
'height':'auto'
}); */
$(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({
'height':'auto'
});
});
})
I am currently implementing a set of tabs similar to the style of an accordian.
This is my code so far...
http://codepen.io/anon/pen/uqBnH
I am having trouble closing the others when one is selected.
My jQuery code...
$(function(){
$('.panel').hide();
$('.mobtabs').click(function(){
$(this).next().toggle();
});
});
Any help would be greatly appreciated.
Just toggle the others shut with:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
$('.mobtabs').not($(this)).next().hide();
$(this).next().toggle();
});
});
jsFiddle example
You can use:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
var nextPanel = $(this).next();
$('.panel').not(nextPanel).hide();
nextPanel.toggle();
});
});
Fiddle Demo
Make the following changes (I added the sliding) -
$('.panel').hide();
$('.mobtabs').click(function(){
$('.mobtabs').not( $(this) ).next().slideUp(); // close them all
$(this).next().slideToggle(); // slide open (or closed if it applies) this tab
});
I ran into this problem that if I toggleClass on the same container using different links trying to show different content it wont show the container on any second link right away. Basically it will close the container and then I would have to click the link once again in order to show the content. I am trying to achieve tabs effect using the same container and toggleClass and unfortunately I can't figure out of how to show the container right away on second link. I would appreciate any advice.
Here is a live example http://jsbin.com/eyEnEvEC/1/
and the entire code.
CSS
.container {
display:none;
}
.show {
display:block;
}
HTML
Link 1
Link 2
<div class="container"></div>
Javascript
$(function(){
$('#link1').click(function(){
$('.container').html('Test 1');
$('.container').toggleClass('show');
return false;
});
$('#link2').click(function(){
$('.container').html('Test 2');
$('.container').toggleClass('show');
return false;
});
});
Try this
HTML
Link 1
Link 2
JQuery
$(function(){
$.fn.toggleContent = function(ahtml) {
var cstatus = $(this).attr("data-status");
$("a[id^=link]").attr("data-status","inactive");
if(cstatus == "inactive") {
$('.container').html(ahtml).show();
$(this).attr("data-status","active");
}
else {
$('.container').html(ahtml).hide();
$(this).attr("data-status","inactive");
}
return false;
};
$('#link1').click(function(){
$(this).toggleContent('Test 1');
});
$('#link2').click(function(){
$(this).toggleContent('Test 2');
});
});
Demo : http://jsbin.com/eyEnEvEC/9/edit