Question

希望你们一切都好。

我正在尝试找到一个代码功能，以了解在打开新的或其他Toggleslide时如何自动关闭打开的Toggleslide？

请参见下面的代码：

可以在以下位置找到： https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle("slow");
  });
});

$(document).ready(function() {
  $("#flip2").click(function() {
    $("#panel2").slideToggle("slow");
  });
});

#panel,
#flip,
#panel2,
#flip2 {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  cursor: pointer;
}

#panel,
#panel2 {
  padding: 50px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<p></p>
<p></p>
<p></p>
<div id="flip2">Click to slide the panel down or up</div>
<div id="panel2">Hello world!</div>

Answer 1

实现此目的最可扩展的方法是在元素上使用公共类。然后，您可以为.flip和.panel元素的每个实例重用相同的JS逻辑。试试这个：

jQuery($ => {
  $(".flip").click(function() {
    let $next = $(this).next(".panel").slideToggle("slow");
    $('.panel').not($next).slideUp('slow');
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  cursor: pointer;
}

.panel {
  padding: 50px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<p></p>
<p></p>
<p></p>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>

Answer 2

您可以使用它。

$('.title').click(function() {
  $(this).next('div').show();

  $(this).parent().siblings().children().next().hide();
  return false;
});

example here

如果您使用引导程序，则可以使用引导手风琴。

单击“其他”时，Toggleslide关闭

2 个答案: