jQuery .removeClass and addClass
I cant remove or add the class within a div and trying to remove the class .wew when the .st-collapse is visible and add class .wew1 if the .st-collapse is hidden
so my flow is go to each parent div and find its div child
my 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>I'm not 100% sure (I'm probably 70% sure actually) about what your problem is, since you posted a statement and not a question. So let me know if I'm way off or close or whatever.
The classes were not provided and I assume it must be of some importance since we are dealing with visibility and two classes(probably with diametrically opposed properties involving either display , visibility , and/or opacity . So I made my own classes .off and .on .
.st-heading.on + .st-collapse {
opacity: 1;
}
.st-heading.off + .st-collapse {
opacity: 0;
}
The classes in question belong to .st-header so I added the + adjacent sibling selector to indicate that the visibility of .st-collapse hinges upon whether .st-heading is .off or .on . I shortened the jQuery by:
...removing .each() because with jQuery you don't need to be specific in simple cases. $('.st-heading') will find each .st-heading on the page as well...
...replacing add/removeClass() with 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>Code is working fine
check the bin at Working Demo of Code
I have did that at click event! Check!
Maybe jQuery is missing in your page
上一篇: 隐藏元素但保持空间