Question

我对jquery / javascript非常缺乏经验，我正试图通过这个方法。我找到了其他帖子，建议如何完成类似于我想要做的事情，但我对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 DEMO

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元素，因为bootstrap要求您为布局添加几个div。

代码说明：

完成文档加载后，可以滑动所有p个元素。
点击h3后，让我们找到它旁边的p元素并将其向下滑动。使用幻灯片切换有助于在再次点击相同p时隐藏h3元素。
点击功能中第二行的功能将通过以下方案清除。首先，如果您点击h3 p元素朝下。但是当你在那之后点击另一个h3时。 not函数定位除当前点击的p元素之外的所有p元素，并将所有元素向上滑动。所以请记住，首次点击p的{{1}}元素仍然显示，因此我们需要在您第二次点击时点击另一个h3时隐藏该内容。

希望解释有助于理解代码。

Modiefied HTML（删除不必要的div）

h3

Modiefied JS

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

使用解决方案查看此codepen。 http://codepen.io/anon/pen/wGzgBd

如果切换了jquery slideToggle元素，则隐藏所有其他元素

2 个答案: