jQuery .removeClass和addClass
我不能删除或添加类在一个div
并尝试删除类.wew
当.st-collapse
可见并添加class .wew1
如果.st-collapse
隐藏
所以我的流程是去每个父母的div和找到它的小孩
我的HTML
<div class="st">
<div class="st-heading wew">
<a href="#">Link 1</a>
</div>
<div class="st-collapse">
<ul>
<li><a href="#">Sub-Link 1</a></li>
<li><a href="#">Sub-Link 2</a></li>
<li><a href="#">Sub-Link 3</a></li>
</ul>
</div>
</div>
<div class="st">
<div class="st-heading wew">
<a href="#">Link 1</a>
</div>
<div class="st-collapse">
<ul>
<li><a href="#">Sub-Link 1</a></li>
<li><a href="#">Sub-Link 2</a></li>
<li><a href="#">Sub-Link 3</a></li>
</ul>
</div>
</div>
我不是100%确定(实际上我大概70%),因为你发表了一个声明而不是问题。 所以让我知道,如果我走了或关闭或任何其他。
这些类没有提供,我认为它必须具有一定的重要性,因为我们正在处理visibility
和两类(可能具有涉及display
, visibility
和/或opacity
visibility
截然相反的属性。所以我创建了自己的类.off
和.on
。
.st-heading.on + .st-collapse {
opacity: 1;
}
.st-heading.off + .st-collapse {
opacity: 0;
}
所讨论的类属.st-header
所以我增加了+
相邻的兄弟选择器,以指示的可视性.st-collapse
时是否铰链.st-heading
是.off
或.on
。 我通过以下方法缩短了jQuery:
...移除.each()
因为使用jQuery,你不需要在简单的情况下具体化。 $('.st-heading')
会在页面上找到每个.st-heading
以及...
...用toggleClass()
替换add/removeClass()
toggleClass()
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
.st-heading.on + .st-collapse {
opacity: 1;
}
.st-heading.off + .st-collapse {
opacity: 0;
}
</style>
</head>
<body>
<section class="st">
<div class="st-heading off">
<a href="#">Link 1</a>
</div>
<div class="st-collapse">
<ul>
<li>
<a href="#">Sub-Link 1</a>
</li>
<li>
<a href="#">Sub-Link 2</a>
</li>
<li>
<a href="#">Sub-Link 3</a>
</li>
</ul>
</div>
</section>
<section class="st">
<div class="st-heading on">
<a href="#">Link 1</a>
</div>
<div class="st-collapse">
<ul>
<li>
<a href="#">Sub-Link 1</a>
</li>
<li>
<a href="#">Sub-Link 2</a>
</li>
<li>
<a href="#">Sub-Link 3</a>
</li>
</ul>
</div>
</section>
<script>
$(".st-heading").toggleClass('on off');
</script>
</body>
</html>
代码工作正常
在代码的工作演示中检查垃圾箱
我已经在点击事件中做到了这一点! 检查!
Maybe jQuery is missing
在你的页面中Maybe jQuery is missing