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"));}
});
});
Related
How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});
$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.
$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});
Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}
I am using bootstrap mega menu. On hover it opens sub menu but sometime it takes click event also and sub menu got stuck.
In my javascript there is not mention any click event just have hover code.
$(document).ready(function() {
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("100");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("100");
$(this).toggleClass('open');
}
);
});
reference:
https://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel
You need to change the Hover event to Click event and make it "toggleable".
Theres an example for that:
$(document).ready(function(){
var dropdownOpen = null; // Toggle status
$(".dropdown").click(function() {
if(dropdownOpen === this){
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close clicked
dropdownOpen = null; // Reset
}
else{
$('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); // Open clicked
dropdownOpen = this; // Set
}
$(this).toggleClass('open');
});
// Hide when click outside the element
$(window).click(function() {
$('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all
});
});
You can try this code in the same reference example you posted above.
Edit: I added the dropdown hidden when click outside the element
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 one question about jQuery close system. I have created this DEMO from codepen.io
In this demo you can see there are two div (red and blue). When you click the red div then the .CRtW11 will be an active. But after you click the blue div the .CRtW11 stayed on there; it needs to be inactive. What is the problem there, can anyone tell me ?
JS
// FOR cR
$("body").on("click", ".cR", function(event) {
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
This function wont work for the red and blue div as their click events are stopped in their respective click functions. So the simple solution will be to add the remove class function in the opposite click functions. i.e.
// FOR cR
$("body").on("click", ".cR", function(event) {
$(".BRc").removeClass("BRc-active");
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});