Onclick remove div class specifically does not work jquery function

综合技术 2017-12-26
$(".side-nav-toggle").click(function() {
    $("body").toggleClass("side-nav-open");
});

$(".nav-level-back").click(function() {
    $(".nav-links-container").removeClass("open");
    $(".nav-level-2").removeClass("open");
});
$(".nav-links li").click(function() {
    $(".nav-links-ontainer").addClass("open");
    $(this).children('div').addClass('open');
});

I wrote this jquery for navigation purpose , addclass works fine but when i want to remove addedclasses from divs removeClass function not working . When i trigger remove class function it highlights those targeted div but didnt remove class from it ,

kindly see this link http://picpaste.com/helpp-Nkc9zDIU.png

html

Hi I have figured it out i.e the cause. Its related to hierarchy of HTML elements, You are adding open class on click of li, and removing class on click of back link. But the back link is within li. So when you click on back link, jQuery first removes open class and then since li is also clicked, it adds again. Check it using alerts

$(".side-nav-toggle").click(function() {
    $("body").toggleClass("side-nav-open");
});

$(".nav-level-back").click(function() {alert("Back link clicked remove class");
    $(".nav-links-container").removeClass("open");
    $(".nav-level-2").removeClass("open");
});
$(".nav-links li").click(function() {alert("Add class open");
    $(".nav-links-ontainer").addClass("open");
    $(this).children('div').addClass('open');
});

您可能感兴趣的

What is a good autocomplete to use for a search fi... I am looking for an autocomplete ( or autosuggest) that is good for a search field like this: :get do %> nil %> I try to ...
Reactive design with jQuery Isotope and CSS Media-... I'm currently trying to build a responsive design and would need some help... Basically: a #wrapper DIV contains thumbnails displayed in grid ...
View the dynamic content of the display database u... Recently, i am working with jquery for my mini-project. I took a code from this resource. http://unwrongest.com/projects/airport/ My code w...
Get the image file size from the Base64 string How can I get the base64 string of an image using JS I'm trying to get the base64 string of an image using only j...
码云推荐 | 支持大文件切片上传的 jQuery 插件 fcup... fcup.js fcup是一款支持大文件切片上传插件。该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度。。 安装 直接下载源码,上传功能需要php环境,演示地址: http://fcphp.cn/fcup 使用方法 $.fcup(...