我怎样才能一次只显示一个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边距或填充而不是换行符来格式化您的内容.间距的额外标记元素是丑陋且低效的.