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/
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();
});
});
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');
};
});
});
So I have this code from a previous question: http://jsfiddle.net/928Dj/4/
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
$(this).next('ul').toggle();
});
I was wondering if anyone could tell me how I allow it to still be toggled open and closed, but also make it so if one menu is open and I click to open another menu, it closes the first one, meaning only one menu can be open at any time.
Try to hide the opened ul elements first and then toggle the current element,
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function (e) {
var cache = $(this).next('ul');
$('#filter ul:visible').not(cache).hide();
cache.toggle();
});
DEMO
You can hide all the visible submenus before showing the current one as follows
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
var ul = $(this).next('ul');
$('ul li ul:visible').not(ul).hide();
ul.toggle();
});
Demo
This is the best way. You can also try this:
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
$(this).next('ul').toggle();
$(this).parent().siblings().find('.opt').hide();
});
Fiddle
I have two divs : #mosaic-content & #mosaic-content-1.
Initially, when the loads, #mosaic-content will be displayed with a class .active and #mosaic-content-1 will be hidden.
I have 4 links:
Home
Event
Gallery
About
The div #mosaic-content-1 should be displayed only when the user clicks on About. For all the other 3 clicks, it has to remain hidden.
I wrote the following code to achieve this:
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
});
$("#about").click(function () {
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
});
However, in the above code, if #mosaic-content is shown and then the user clicks Event or Gallery, the functions are run again, which makes my website a bit slow( The divs are full with a lot of HTML content).
Is there any better way of achieving this?
use .is(':visible') to check if the div is already visible
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
if(!$("#mosaic-content").is(':visible')){
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
}
});
$("#about").click(function () {
if($("#mosaic-content").is(':visible')){
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
}
});
Use classes, not id's.
Hide as default block .mosaic-content-1:
$(".mosaic-content-1").hide();
After show block .mosaic-content
$(".mosaic-content").show();
Onlick functions in block navigation:
$(".navigation a").click(function() {
if(!$(this).hasClass("about");) {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content-1").hide();
$(".mosaic-content").show();
} else {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content").hide();
$(".mosaic-content-1").show();
}
});
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/