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

Question

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

结果如下:如果我打开一个，前一个关闭。

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

谁能告诉我为什么会这样？

$(".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>

Answer 1

试试这个，它会导致错误，因为您对包装器和按钮使用相同的类名 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>