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和两类(可能具有涉及displayvisibility和/或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

    链接地址: http://www.djcxy.com/p/83551.html

    上一篇: jQuery .removeClass and addClass

    下一篇: Pass IDs of visible images