时间戳

首页 > 解决方案 > 单击 Jquery JS 时按钮重新打开

javascript - 单击 Jquery JS 时按钮重新打开

问题描述

我正在尝试以下操作：当用户单击按钮时，会打开一个值。如果另一个按钮已经打开，它将关闭。

结果如下：如果我打开一个，前一个是关闭的。

问题是如果我尝试关闭我打开的同一个按钮，它会重新打开它的内容。

有人能告诉我为什么会这样吗？

$(".btnCategory").click(function() {
    var target = $(this).find('.infoSubCategory');
    $('.infoSubCategory').not(target).slideUp();
    target.slideToggle()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<row class="col-xs-12" id="row1">
  
  <div class="col-xs-6 btnCategory">
											
		<button class="btn btn-default btn-block btnCategory">
			<a class="">BUTTON 1</a>
		</button>

		<div class="infoSubCategory">
                     
  			<li><a>Value 1</a></li>
  
  		</div>
  </div>

</row>

<row class="col-xs-12" id="row2">
  
  <div class="col-xs-6 btnCategory">
											
		<button class="btn btn-default btn-block btnCategory">
			<a class="">BUTTON 2</a>
		</button>

		<div class="infoSubCategory">
                     
  			<li><a>Value 2</a></li>
  
  		</div>
  </div>

</row>

标签： javascriptjqueryhtmlcss

解决方案

试试这个，它会导致错误，因为您btnCategory对包装器和按钮使用相同的类名。

$(".btnCategory").click(function() {
    var target = $(this).parent().find('.infoSubCategory');
    $('.infoSubCategory').not(target).slideUp();
    target.slideToggle()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<row class="col-xs-12" id="row1">
  
  <div class="col-xs-6">
											
		<button class="btn btn-default btn-block btnCategory">
			<a class="">BUTTON 1</a>
		</button>

		<div class="infoSubCategory">
                     
  			<li><a>Value 1</a></li>
  
  		</div>
  </div>

</row>

<row class="col-xs-12" id="row2">
  
  <div class="col-xs-6">
											
		<button class="btn btn-default btn-block btnCategory">
			<a class="">BUTTON 2</a>
		</button>

		<div class="infoSubCategory">
                     
  			<li><a>Value 2</a></li>
  
  		</div>
  </div>

</row>

推荐阅读