javascript - 简化多切换 div

Question

我想通过不键入每个 div 来简化代码(#TopicA、#TopicB、#main 等)选择选项时要折叠的 ID。

我想要除了那些触发按钮自动折叠的div之外的所有div。我怎样才能做到这一点？

示例:当我点击 TopicA1 时，我想折叠所有其他 div，但我不想将所有 div ID 放入JS 代码。

演示:JSFiddle

<div id="main" class="QA">
        <h2>Title</h2>
        <h3>Subtitle</h3>
        <button class="ClassButtonA">Topic A</button>
        <button class="ClassButtonB">Topic B</button>
        <button class="ClassButtonC">Topic C</button>
    </div>

    <div id="TopicA" class="QA">
        <h2>XX</h2>
        <button class="ClassButtonA1">Topic A1</button>
    </div>

$(".ClassButtonA").click(function() {
            $("#TopicA").toggle("slow").trigger('reset');
        });
        $(".ClassButtonA").click(function() {
            $("#TopicB, #TopicC, #main").slideUp("slow").trigger("reset");

Answer 1

单个函数处理切换，并隐藏当前显示的 div 的所有同级。请注意，我确实修改了您的结构一些 - 内容 Pane div 现在包含我希望显示/隐藏的所有 div，从而使按钮 Pane 保持显示。希望对您有帮助!

// Event handler for click on any button el
$(".QA button").click(function() {
  // The text of the button matches the id
  //  of the div els, if I strip spaces.
  var toggleThis = "#" + $(this).text().replace(/\s/g, '')
  // Using the given string above, toggle that
  //  div el, and hide all siblings to that.
  $(toggleThis).show("slow").trigger('reset').siblings().hide("slow").trigger('reset');
});

.QA {
  font: normal normal 14px/1 Helvetica;
  margin: 1px;
  border-radius: 10px;
  text-align: center;
}

#TopicA,
#TopicB,
#TopicC,
#TopicA1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="QA">
  <h2>Title</h2>
  <h3>Subtitle</h3>
  <button class="ClassButtonA">Topic A</button>
  <button class="ClassButtonB">Topic B</button>
  <button class="ClassButtonC">Topic C</button>
</div>

<div class="content-pane">
  <div id="TopicA" class="QA">
    <h2>XX</h2>
    <button class="ClassButtonA1">Topic A1</button>
  </div>
  <div id="TopicA1" class="QA">
    <h2>123</h2>
  </div>

  <div id="TopicB" class="QA">
    <h2>YY</h2>
  </div>
  <div id="TopicC" class="QA">
    <h2>ZZ</h2>
  </div>

</div>