如何一次只顯示一個div？

Question

我有這段代碼，但是我不確定如何創建它，以便每次單擊一個按鈕時，它都會關閉已經打開的另一個div。 jQuery的新手！

HTML:
    <p class="profile-name">Name</p><br>
                <p class="profile-title">Documentation Officer</p><br>
                <button id="button-g" class="bio-button">Bio</button><br>
                <a class="profile-email" href="mailto:email@test.com">email@test.com</a>
                <div class="toggler">
                  <div id="effect-g" class="profile-bio">
                      <p>Bio information. Bio Information</p>
                  </div>
                </div>

JQUERY：

<script>
  $(function() {
    $( "#button-a" ).click(function() {
      $( "#effect-a" ).slideToggle( "visible");
    });
    $( "#button-b" ).click(function() {
      $( "#effect-b" ).slideToggle( "visible");
    });
    $( "#button-c" ).click(function() {
      $( "#effect-c" ).slideToggle( "visible");
        $("#button-b").hide();
    });
    $( "#button-d" ).click(function() {
      $( "#effect-d" ).slideToggle( "visible");
    });
    $( "#button-e" ).click(function() {
      $( "#effect-e" ).slideToggle( "visible");
    });
    $( "#button-f" ).click(function() {
      $( "#effect-f" ).slideToggle( "visible");
    });
    $( "#button-g" ).click(function() {
      $( "#effect-g" ).slideToggle( "visible");
    });
  });
  </script>

Answer 1

通過ID（或任何其他唯一屬性）以統一，重復的結構定位成千上萬個元素幾乎是不明智的。 將所有按鈕和所有可折疊兄弟姐妹分別設置為相同的類，然后執行此操作（或類似的操作-在看不到您的HTML的情況下，我無法說得更具體）：

$('.my-button-class').click(function() {
    $(this).next('.my-collapsible-div-class').slideDown()
      .siblings('.my-collapsible-div-class').slideUp();
});

這假設標記如下：

<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>

<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>

<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>

---

根據您的HTML更新：

$('.bio-button').click(function () {
    $(this).nextAll('.toggler:first').slideToggle()
        .siblings('.toggler').slideUp();
});

演示版

• http://api.jquery.com/nextall
• http://api.jquery.com/first-selector

偏離主題的建議：使用CSS邊距或填充而不是換行符來格式化內容。 用於間距的額外標記元素非常難看且效率低下。

Answer 2

給div的一個通用類和一個自定義數據屬性以及要打開的下一個div的字母，然后將其組合為一個函數。 樣本div：

<div id="effect-a" class="effect"></div>

樣品按鈕

<button id="button-a" class="button" data-letter="a">Click me</button>

單功能

$(".button").click(function() {
    //Slide up any open divs
    $(".effect").slideUp();

    var divLetter = $(this).data("letter") //a

    //Concatenate selector
    $("#effect-" + divLetter).slideDown();
});