javascript - 切换 + 切换类

Question

您好，我在 Jquery 中使用切换功能。有一个显示内容的按钮(这部分工作正常)我想在按钮处于事件状态时添加类。我认为切换类是我需要的。到目前为止我有

< script type = "text/javascript" >
  $(".left-menu-button").click(function() {
    var $that = $(this);
    $(".left-menu-content").toggle("slow", function() {
      $that.toggleClass(".left-menu-button-active");
    });
  });


< /script>

.left-menu {
  margin-bottom: 5px;
  display: block;
  height: 100%;
  overflow: visible;
  position: absolute;
}
.left-menu-button {
  background: #00447f;
  width: 76px;
  height: 140px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  color: #00447f;
  padding-top: 50px;
  margin-left: -3px;
}
.left-menu-content {
  margin-top: 2px;
  height: 186px;
  width: 295px;
  display: inline-block;
  background: green;
  position: relative!important;
  z-index: 100;
  display: none;
}
.left-menu-content section {
  width: 170px;
  margin: 0 auto;
}
.left-menu-button-active {
  background: #000;
  color: red;
  font-size: 100px;
  background: #00447f;
  width: 76px;
  height: 140px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  color: #00447f;
  padding-top: 50px;
  margin-left: -3px;
}

<section class="left-menu">
  <ul>
    <li>
      <span class="left-menu-content">    
                  <section class=" updates-area left-menu-content">
            			<h2><a href="#">Latest News</a></h2>
							<span class="read-more text-center">
                  	<a href="#">Read more</a>
              			</span>

</section>{% endblock %}
</span>
<a class="left-menu-button icon-document93">News</a>

</li>
</ul>
</section>

那个蓝色按钮下面有一个内容。我不能同时添加类和切换。请帮忙。 .left-menu-button 应该在切换和显示内容时更改它的类。

Answer 1

删除选择器中的点，如下所示。

$that.toggleClass("left-menu-button-active");

并将内部 left-menu-content 类更改为 $(".left-menu-content").toggle 触发两次。

$(".left-menu-button").click(function() {
    var $that = $(this);
    $(".left-menu-content").toggle("slow", function() {
        $that.toggleClass("left-menu-button-active");
    });
});

Fiddle

更新

您的新标准可以像这样工作:-

$(".left-menu-button").click(function() {
     var $that = $(this);
     $(this).parent().find(".left-menu-content").toggle("slow", function() {
        $that.toggleClass("left-menu-button-active");
    });
});