如何使用 jquery 切换特定的 div

Question

好吧，我对这方面的了解非常有限，我无法在任何地方找到我的答案。我想要做的是创建多个按钮来切换信息。因此，当单击第一个开关时 div 1 被切换，当我单击第二个开关时 div 两个打开，最好 div 1 关闭。我的代码非常基础，我对此很陌生。现在，无论我在切换区域中输入什么值，div 都会关闭。谢谢你，我希望这是有道理的。

这是我的代码：

<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>

Answer 1

您可以 select 下一个兄弟姐妹：

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

在上面的代码中，JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() 方法 select 是集合元素的下一个兄弟元素。

Answer 2

我也同意，首先你需要隐藏所有的div:

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

Answer 3

<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>

从 JS 访问元素时最好使用唯一定义的标识符（不要将它们用于 CSS — 使用单独的名称）。

你的 HTML 代码有一天会发生巨大的变化，JS 仍然可以工作，因为它依赖于标识符而不是结构或标签名称。

如何使用 jquery 切换特定的 div

How to toggle specific divs with jquery

javascript

jquery

toggle