When a user clicks on the logo, the sidebar opens; when they click on the menu or body, the sidemenu closes, however there is one exception I'm trying to figure out. If you click in the input field within the sidemenu, the menu closes. I would like the sidemenu to stay open when the user is click in the input field. Below is the jsfiddle and js.
jsFiddle
$("#menu-close").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(){
if($("#sidebar-wrapper").hasClass('active')){
$("#sidebar-wrapper").removeClass("active");
}
});
Try this
$("#menu-close").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(e){
if($('#sidebar-wrapper').has(e.target).length === 0){
if($("#sidebar-wrapper").hasClass('active')){
$("#sidebar-wrapper").removeClass("active");
}
}
});
DEMO
Try this.
$("#menu-close").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
// Stop propagation for sidebar-wrapper to stop closing the sidebar panel
$('#sidebar-wrapper').click(function(e){
e.stopPropagation();
})
$("#menu-toggle").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(){
if($("#sidebar-wrapper").hasClass('active')){
$("#sidebar-wrapper").removeClass("active");
}
});
Update Fiddle
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 drop down div is view after click packages and i want to add when select choose your destination change the icon set. i tried but when click drop down item on list main div slide up...
my jquery code is below
//SLIDE UP AND DOWN FUNCTION
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
if($packages.is(":visible")){
$packages.slideUp(350);
setTimeout(function () {
$('li.dropdown-packages').removeClass('dwn-arrow');
}, 800);
}
if($packages.is(":hidden")){
$packages.slideDown(350);
setTimeout(function () {
$('li.dropdown-packages').addClass('dwn-arrow');
},800);
}
});
Use the slideToggle() method.
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
$packages.slideToggle();
});
I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick
You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});
I have this code in my script:
$(document).ready(function() {
$('*').not('div#user').click(function() {
$('div#userSettings').hide();
});
$('div#user').click(function() {
$('div#userSettings').toggle();
$('div#profileSettings').toggleClass('rotate');
});
});
I need the div#userSettings to be hidden whenever anything but it's button or itself is clicked, and I want it to appear only when I click on the div#user.
the toggleclass does still work in this, just that the div#userSettings does not appear at all
You can stop the event propagation
$(document).ready(function () {
$(document).click(function (e) {
$('#userSettings').hide();
})
$('#user').click(function (e) {
e.stopPropagation();
$('#userSettings').toggle();
$('#profileSettings').toggleClass('rotate');
});
$('#userSettings').click(function (e) {
e.stopPropagation();
});
});
Demo: Fiddle
I have a list item that displays a hidden div once its clicked. I want to be able to hide the div if the list item is click on again. How can I do this?
$(function () {
"use strict";
function resetTabs() {
$("#sub_content > div").hide(); //Hide all content
$("#tabs a").removeClass("current"); //Reset id's
}
$("#sub_content > div").hide(); // Initially hide all content
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
});
});
http://jsfiddle.net/E9mPw/
Thanks.
You can use fadeToggle()
$($(this).attr('name')).fadeToggle();
http://jsfiddle.net/E9mPw/2/
you just can add "if" statement, if you just want to fix your script
$("#tabs a").on("click", function (e) {
e.preventDefault();
if($(this).hasClass('current')){
resetTabs();
}
else{
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
http://jsfiddle.net/E9mPw/7/
You can use toggle jquery properties.
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).toggle("current");
});
You chould check this links
You can check if the a has the class current and fade it out accordingly:
$("#tabs a").on("click", function (e) {
e.preventDefault();
//resetTabs();
if($(this).hasClass("current"))
{
$(this).removeClass("current");
$($(this).attr('name')).fadeOut(); // Hide content for current tab
}
else
{
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
JSFiddle