Question

我想创建一个多层次的非画布菜单，但我遇到了错误，因为Jquery没有按子项删除类。在示例中，您可以看到，当您按下“后退”时没有任何appen，如果您使用了chrome的开发工具，您可以看到某些东西附加到div类但不会被删除。

以下是fiddle

$(function(){       
    $(".m-nav-back").click(function(){
            $(".under-level").removeClass("active");
    });
});

Answer 1

你可以使用

$(function(){       
    $("body").on('click',".m-nav-back",function(){
            $(".under-level").removeClass("active");
    });
});

因为有时候多个图层对于和元素的直接点击事件不起作用所以你需要使用体元素来触发

这将100％

＆＃13;

$(function(){		
	$(".m-nav-opener").on('click',function(){
		if ($("body").hasClass("m-nav-open")){
			$("body").removeClass("m-nav-open");
		} else {
			$("body").addClass("m-nav-open");
		}
	});
});
$(function(){		
	$("nav li:has(div)").click(function(){
			$(this).children("div").addClass("active");
	});
});
$(function(){		
	$("body").on('click',".m-nav-back",function(){
			$(".under-level").removeClass("active");
	});
});

＆＃13;

.m-nav-container {
  position: fixed;
  z-index: 1001;
  width: 300px;
  height: 100%;
  background: #DEDEDE;
  padding: 0px;
  font-size: 1.15em;
  box-sizing: border-box;
  top: 0;
  overflow: auto;
  left: -300px;
        transition: all 0.8s ease 0s;
}
body {
    transition: all 0.8s ease 0s;    
}
.m-nav-open {
    transform: translateX(300px);
}
nav ul {
    list-style: outside none none;
padding: 0px;
margin: 0px;
}
nav li {
    display: block;
border-radius: 0px;
margin: 0px 0px 3px;
}
nav li a {
    display: block;
color: #383838;
padding: 15px;
text-decoration: none;
border-radius: 0px;
transition: background-color 0.4s ease 0s;
cursor: pointer;
}
nav li div {
    list-style: outside none none;
padding: 0px;
margin: 0px;
top: 0px;
position: absolute;
left: 300px;
z-index: 2;
width: 300px;
height: 100%;
background: #DEDEDE none repeat scroll 0% 0%;
transition: all 0.8s ease 0s;
}
.active {
    transition: all 0.8s ease 0s;
transform: translateX(-300px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="soround">
    <div class="m-nav-container">
        <nav>
            <ul>
                <li><a>content</a></li>
                <li><a>content</a></li>
                <li><a>content</a></li>
                <li> <a>TOUCH ME</a>
                    <div class="under-level">
                        <ul>
                            <li><button class="m-nav-back">BACK</button><li>
                            <li><a>content 2</a></li>
                            <li><a>content 2</a></li>
                            <li><a>content 2</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
    <button class="m-nav-opener">MENU</button>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
    
</div>

＆＃13;

Answer 2

事件发生时正在发生这种情况，所以在back点击之后，该课程将被删除。所以尝试使用：

event.stopPropagation()

此外，您不需要检查元素是否具有类，然后将其删除。只需切换它：

$(".m-nav-opener").click(function(){
    $("body").toggleClass("m-nav-open");
});

此外，您不需要多次使用$(function() { blah blah });。

这是DEMO。

JQuery不会通过内部项删除类

2 个答案: