toggle - 如何使用jquery切换特定的div

我试图创建多个按钮来切换信息,单击div 1时切换,当我单击第二个div时,第二个div打开,div 1关闭,

这是我的代码:


<script>
$(document).ready(function(){
 $("button").click(function(){
 $("div.house").toggle();

 });
});
</script>

<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>

<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>

时间:

可以选择下一个同级:


$("button").click(function(){
 $(this).next().toggle();
});

$(this)创建jQuery集合,.next()方法选择集合元素的下一个同级。

首先你需要隐藏所有div:


$("button").click(function () {
 $('div').hide();
 $(this).next().toggle();
});


<script>
 $(document).ready(function () {
 $(document).on("click",".js-toggle__button", function (e) {
 $(".js-toggle__text").hide();
 $(this).next(".js-toggle__text").show();
 });
 });
</script>

<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
 <p>SAMPLE TEXT 1 ETC...</p>
</div>

<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
 <p>SAMPLE TEXT 2 ETC...</p>
</div>

...