jQuery .removeClass and addClass

我不能在div中删除或添加类，并试图在.st-collapse可见时删除.wew类，如果.st-collapse添加.wew1类是隐藏的

那么我的流程就是找到每个父div并找到它的子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>

这是我的脚本

  jQuery(".st").each(function(){
      var s = jQuery(this).find(".st-collapse").is(":visible");
      if(s){
        jQuery(this).find(".st-heading").removeClass("wew");
      }else{
        jQuery(this).find(".st-heading").addClass("wew1");
      }
    });

我不是100%确定(实际上我可能是70%确定)关于你的问题是什么，因为你发布了一个声明，而不是一个问题。所以告诉我，如果我离得太远了，或者接近了，或者其他什么。

没有提供类，我认为它一定很重要，因为我们正在处理visibility和两个类(可能具有完全相反的属性，涉及display, visibility和/或opacity)。所以我创建了自己的类.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…
…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>

代码运行正常

在Working Demo中查看bin

我已经在click event中做过了!检查!

Maybe jQuery is missing 在你的页面

相关内容

最新更新

热门标签：