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>

单击Jquery JS时按钮重新打开

1 个答案: