Hy!Im a iniciant in javascript.
I'm having trouble closing the dropdown when clicking on another open one.
I try this:
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
} else {
this.previousElementSibling.classList.remove('dropdown-active');
}
}, true)
dropdown image opened items
Codepen code
Thank you for any help!
a few days later.
this is my solution:
Use querySelectorAll + forEach in .dropdown-active and then remove the class
on('click', '.navbar .dropdown > a', function (e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
document.querySelectorAll(".dropdown-active").forEach(function (element) {
element.classList.remove("dropdown-active");
});
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
Related
I have written jquery code for highlighting menu onclick of each respective submenu. Now here what happening is
I have one same link in three of the sub-menu's, so when I click one of them, it is highlighting the last menu.
Here is my code:-
var str = location.href.toLowerCase();
$("#menu li a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents("#menu ul").parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("li.activelink").parents("#menu ul").parent().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("#menu li .para1 a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents().parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
Have a look here
Also see the HTML of the same in the Js fiddle
Please suggest something for the same
UPDATE: This was not the OP intended question. The code below will not solve the problem.
I had this problem numerous times. Try this CSS code:
#menu > li:hover { background-color: red; }
Replace the background color declaration with your own highlight.
This question already has answers here:
How do I prevent my dropdown from closing when clicking inside it?
(3 answers)
Closed 4 years ago.
My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?
JSFiddle
// Add open class if active
$('.sidebar-nav').find('li.dropdown.active').addClass('open');
// Open submenu if active
$('.sidebar-nav').find('li.dropdown.open ul').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add close animation
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
Demo: http://jsfiddle.net/wkc5md23/3/
I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead this solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event.
The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on click I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.
$(function () {
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
'hide.bs.dropdown': function (event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
You can disable the dropdown functionality temporarily. This is a workaround.
Example with input field inside the drop-down "menu":
//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
// this attribute can be anything except "dropdown", you can leave it blank
$('#yourDropdownID').attr('data-toggle', 'off');
});
//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
$('#yourDropdownID').attr('data-toggle', 'dropdown');
});
This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.
Not close in click out side menu
$(function() {
var closeble = false;
$('body').on('click', function (e) {
if (!$(event.target).is('a.dropdown-toggle')) {
closeble = false;
}
});
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
closeble = true;
} else {
closeble = false;
}
},
'hide.bs.dropdown': function () {
return closeble;
}
});
});
I have a menu with a dropdown, where the LI element gets an activeclass on click. I have, after a lot if struggle, managed to set a script that sets an active class to an div that I have hidden, which shows on the click as an overlay of the site (under the dropdown). everything works as It should, except if I click outside the dropdown to close it instead of clicking the menubutton. This doesnt change my overlay div's class- how do I change my script to work on clicks outside the dropdown aswell, and what should I target here?
The hidden div:
<div id="site-overlay"></div>
script:
$.noConflict();
jQuery(document).ready(function(){
jQuery('li').on('click', function(){
if(jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
})
});
This will work:
$.noConflict();
jQuery(document).ready(function () {
jQuery('li').on('click', function () {
if (jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
});
jQuery("#site-overlay").click(function () {
jQuery(this).removeClass("active");
});
});
Notice the new event handler.
You can add a click event to the document body and then check the click location:
$(document).click(function(event) {
if(!$(event.target).closest('#site-overlay').length) {
if($('#site-overlay').is(":visible")) {
$('#site-overlay').hide()
}
}
})
jQuery('li').on('click', function(){
...
}
This executes only when you click on 'li' element.
But what about clicking outside 'li' element?
Try to add or replace:
jQuery('body').on('click', function(){
if(jQuery('.megamenu li').hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
}
At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});
On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}
I am trying to slide an element down when another is click and if that link is then clicked again, slide the element back up, is there a cleaner way of doing it than this?
$("#dropdown, #dropdown span, #dropdown dt a").click(function(event) {
$("#dropdown dd").slideDown(defaults.speed);
$("#dropdown").addClass('drop_down_open');
event.preventDefault();
});
$(".drop_down_open, .drop_down_open span, .drop_down_open dt a").click(function(event) {
console.log("hello");
$("#dropdown dd").slideUp(defaults.speed);
event.preventDefault();
});
$("#anElement").click(function(e) {
var theItem = $("#dropdown dd");
if (theItem.css("display") == none) {
theItem.slideDown(defaults.speed);
}
else {
theItem.slideUp(defaults.speed);
}
e.preventDefault();
});
Modify according to your specific needs.
Is this what you wanted. http://jqueryui.com/demos/accordion/