切换+ toggleClass

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>

​

在那个蓝色按钮下面有一个内容。我不能同时增加类和切换。请帮帮忙。左键-菜单按钮应该改变它的类切换和显示内容。

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");
    });
});

Answer 2

我更新了片段。目标是让这个“抽屉”独立工作。如果我点击最新的新闻-只有这个块应该显示自己。

​

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

/* LEFT MENU */

.left-menu {
  margin-bottom: 5px;
  display: block;
  height: 100%;
  overflow: visible;
  position: absolute;
}
.left-menu li {
  list-style-type: none;
}
.left-menu-button {
  background: #00447f;
  width: 76px;
  height: 140px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  color: #fff;
  padding-top: 50px;
  margin-left: -3px;
  font-size: 15px;
  text-align: center;
  margin-bottom: 5px;
  vertical-align: top;
}
.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;
  vertical-align: top;
}
.left-menu-button-active {
  background: #000;
  color: red;
  background: #ffba4c;
  color: #00447f;
  -webkit-box-shadow: -7px 2px 13px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -7px 2px 13px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -7px 2px 13px 0px rgba(0, 0, 0, 0.75);
}
.left-menu-button:hover {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="left-menu">
  <ul>
    <li>
      <span class="left-menu-content">    
 	    <section>
 
          
        </section>
		</span>
      <a class="left-menu-button icon-document93">Latest News</a>
    </li>

    <li>
      <span class="left-menu-content">    
        <section>

        </section>
		</span>
      <a class="left-menu-button icon-calendar-icons">Calendar Dates</a>
    </li>







    <li>
      <span class="left-menu-content">    
 		<section class="maps-address">
</section>
		</span>
      <a class="left-menu-button icon-map32">Location and address</a>
    </li>

    <li>
      <span class="left-menu-content">    
 				<section class="social">
          <a href ="">Twitter</a>
          <a href ="">facebook</a>  
          <a href ="">Youtube</a>  
            
        </section>
		</span>
      <a class="left-menu-button icon-document93">Social</a>
    </li>


  </ul>
</section>

​

Answer 3

我做了这份工作，我刚刚编辑了jquery

$(".left-menu-button").click(function() {
  $(this).parent().children('.left-menu-content').toggle("slow", function() {
  });
});