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();
});

<强> Demo

偏离主题的建议：使用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();
});

我怎样才能一次只显示一个div？

2 个答案: