Bootstrap dropdown submenu closing upstream submenu - javascript

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();
});
});

Related

CSS: Failing to display unless refreshed - Navigation bar

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');
};
});
});

Show/hide info onClick

community!
The idea is to create a list with normal list with text and sometimes clickable links.
Problem:
How to make this list to close only when the button is pressed and not when the user click on any item inside the list or anywhere on screen.
Fiddle: jsfiddle.net/H2Chj/494/
HTML:
<button data-text-swap="Show" id="trigger">Hide</button>
<div id="drop">
Menu item 1
Menu item 2
Menu item 3
Menu item 4
</div>
Javascript
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
$("button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});
The one thing you had missing was stopping the propagation when you click on a link in the dropdown. this stops it from bubbling up to the $(document).click event handler.
$('#drop a').click(function(e){ e.stopPropagation(); });
I assume you had the $(document).click handler there so you could close the dropdown by clicking outside the dropdown menu.
see this fiddle: http://jsfiddle.net/o0m8p4bf/2/
Please use this javascript code:
$(document).ready( function(){
$("button").on("click", function() {
$('#drop').toggle();
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});

Keep Sidebar Open if Clicked in Input Field

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

JS Dropdown menu not closing?

So I found this fiddle here: http://jsfiddle.net/8qPvp/4/
I thought I'd use it just for personal education purposes.
I'm really new with JS, and I noticed that the opened parent does not go back on click, like it opens. How could this be fixed?
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
});
What about this:
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
$(document).click(function()
{
$('li > ul:visible').hide();
})
$('.menu li').click(function(e)
{
e.stopPropagation();
})
So by default i make whenever there is clicked ANYWHERE in the document, your visible menu will be hidden. However you don't want this to happen when you open a new menu(would be; made visible and made hiden directly). So i make a exception that catch when you want to open a new menu and i'll cancel the document click event.I use event.stopPropagation() to cancel a event.
jsFiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
}).mouseleave(function(){
$(this).children("ul").hide();
});
});
Check this fiddle http://jsfiddle.net/Aveendra/8qPvp/18/

Set class to active and remove it when another menu item is selected bug

I tested out the script below in jsfiddle and it works fine, can someone guide me how to fix it? This is the url that I need it working in, the wizard style menu at the top right should should have each item set to active when clicked and then removed when another menu item is clicked: http://morxmedia.com/clients/temp/45p/index_vertical.html
Here is the code I am using for this:
<script type="text/javascript">
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
</script>
You are binding the click event to div elements when you should bind them to a elements like so
$(document).ready(function(){
$('.wizard-steps > div > a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});
Try this.
$(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
});
});
better to include that on a ready
$(document).ready(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});
As far as I can see (in your CSS). The class active should go on the div under wizard-steps and the parent of the a-tag.
Try this:
<script type="text/javascript">
$('.wizard-steps div a').click(function(e) {
if (e.preventDefault)
e.preventDefault();
else
e.stop();
$('.wizard-steps div').removeClass('active');
$(this).parent().addClass('active');
});
</script>
It can be done in another way using jquery using .not()
Jquery Code:
$('.wizard-steps div').click(function() {
$('.wizard-steps div').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/surendraVsingh/PLbbr/

Categories

Resources