Question

我想通过不键入每个div（#TopicA，#TopicB，#main等）ID来简化代码。被选中。

除了触发按钮的自动崩溃之外，我希望所有divs。我怎样才能做到这一点？

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

<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。请注意，我确实修改了一些结构 - 内容窗格div现在包含我希望显示/隐藏的所有div，从而显示按钮窗格。希望它有所帮助！

＆＃13;

// 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');
});

＆＃13;

.QA {
  font: normal normal 14px/1 Helvetica;
  margin: 1px;
  border-radius: 10px;
  text-align: center;
}

#TopicA,
#TopicB,
#TopicC,
#TopicA1 {
  display: none;
}

＆＃13;

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

＆＃13;

简化多切换div

1 个答案: