如果jquery slideToggle元素被切換，則隱藏所有其他元素

Question

我對jquery / javascript缺乏經驗，並試圖通過這一方法來mp腳。 我發現其他文章建議如何完成與我嘗試執行的操作類似的操作，但是我對javascript語法的了解非常有限。 如果有人可以幫助，我將不勝感激。

我想做的很簡單。 如果打開了<div> ，則隱藏所有其他。 以下是我到目前為止已完成的工作。

指數

<section class="about" id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">

        <div id="hidden1"><h3>+ Heading 3</h3></div>
        <div class="showtext1">
          <p>Example text one</p>
        </div>

        <div id="hidden2"><h3>+ Heading 2</h3></div>
        <div class="showtext2">
          <p>Example text two</p>
        </div>

        <div id="hidden3"><h3>+ Heading 3</h3></div>
          <div class="showtext3">
            <p>Example text three</p>
          </div>

        </div>
      </div>
    </div>
</section>

javascript

$(function() {
    $('.showtext1')
        .hide();
});
$(document).ready(function() {
    $('#hidden1').click(function() {
        $('.showtext1').slideToggle("slow");
    });
});
// .showtext2
$(function() {
    $('.showtext2')
        .hide();
});
$(document).ready(function() {
    $('#hidden2').click(function() {
        $('.showtext2').slideToggle("slow");
    });
});
// .showtext3
// $(function() {
//     $('.showtext3')
//         .hide();
// });
$(document).ready(function() {
    $('#hidden3').click(function() {
        $('.showtext3').slideToggle("slow");
    });
});

Answer 1

讓我們使代碼動態化，這樣如果您的列表從3個增加到4個或更多，就不必擔心添加更多的jQuery代碼。 另外，如果有加號（+）表示還有更多內容，則加號應變成減號（-）表示您現在可以折疊顯示的內容，以獲得更好的用戶體驗。 JSFIDDLE演示

的HTML

<div class="accordion">
  <dl>
    <dt><h3><span>+</span> Heading 3</h3></dt>
    <dd><p>Example text one</p></dd>
    <dt><h3><span>+</span> Heading 2</h3></dt>
    <dd><p>Example text two</p></dd>
  </dl>
</div>

JS

$(function() {
    $('.accordion dd').filter(':nth-child(n+4)').hide();
    $('.accordion dl').on('click', 'dt', function() {
       $('.accordion dd').hide();
       $(this).siblings("dt").find("span").text("+");
       $(this).find("span").text("-");
       $(this).next().slideDown();
    });
});

Answer 2

您不需要無用地使用那么多的div元素，因為引導程序需要您添加多個div來進行布局。

代碼說明：

1. 完成文檔加載后，讓slideUp所有p元素成為可能。
2. 單擊h3 ，讓我們找到它旁邊的p元素並將其向下滑動。 再次單擊同一h3時，使用滑動切換按鈕有助於隱藏p元素。
3. 在以下情況下，單擊功能中第二行的功能將清除。 因此，首先，如果單擊h3則p元素朝下。 但是當您在此之后單擊另一個h3 。 在not功能針對所有p比目前點擊其他元素p元素和幻燈片個個起來。 因此請記住， p一次單擊的h3的p元素仍然顯示，因此當您在第二次單擊中單擊另一個h3時，我們需要隱藏它。

希望解釋有助於理解代碼。

修改過的HTML（刪除不必要的div）

<section class="about" id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h3>+ Heading 1</h3>
        <p>Example text one</p>
        <h3>+ Heading 2</h3>
        <p>Example text two</p>
        <h3>+ Heading 3</h3>
        <p>Example text three</p>
       </div>
      </div>
   </div>
</section>

修改后的JS

$(document).ready(function(){
  $("p").slideUp();
  $("h3").click(function(){
    $(this).next("p").slideToggle("slow");
    $("p").not($(this).next("p")).slideUp();
  });
});

簽出此codepen與解決方案。 http://codepen.io/anon/pen/wGzgBd