单击另一个时，javascript SlideToogle 不会隐藏

Question

我有 3 个点击事件

ABC。

当我点击A时，A显示“aaaaa”

当我点击B时，B显示“Bbbbbbbbb”

当我点击C时，C显示“Ccccccccc”

问题是当我点击A，然后点击B时，A仍然显示。

我想要的是当点击B或C时A自动隐藏。

目前，如果我单击全部 3 个(a、b、c)，它将全部显示。但我希望它只一一显示。

这是我的代码:

Javascript

 $(function () {
          $('.expandContent3 span').click(function () {
              $('.showMe3').slideToggle('slow');
          });
      });
      $(function () {
          $('.expandContent1 span').click(function () {
              $('.showMe1').slideToggle('slow');
          });
      });
      $(function () {
          $('.expandContent2 span').click(function () {
              $('.showMe2').slideToggle('slow');
          });

HTML 代码:

  <div class="readMore1 expandContent1" style="cursor: pointer;float: left;margin-right: 8px;">
<span><b>A</b></span></div>
<div class="readMore2 expandContent2" style="cursor: pointer;float: left;margin-right: 8px;">
<span><b>B</b></span></div>
   <div class="readMore3 expandContent3" style="cursor: pointer;float: left;margin-right: 8px;">
<span><b>C</b></span></div>

 <div class="showMe1" style="display:none; clear:both;">
<p><b>aaaaaaa</b></p>
<p><b>aaaaaaa</b></p>
 </div>

 <div class="showMe2" style="display:none; clear:both;">
<p><b>Bbbbbbbbb</b></p>
<p><b>Bbbbbbbbb</b></p>
</div>

<div class="showMe3" style="display:none; clear:both;">
<p><b>Cccccccc</b></p>
<p><b>Ccccccc</b></p>
 </div>

有什么想法吗？

Answer 1

您需要向所有点击处理程序添加检查:

$('.expandContent1 span').click(function () {
    $('.showMe1').slideToggle('slow');
    if( $('.showMe2').is( ':visible' ) ) $('.showMe2').slideUp('slow');
    if( $('.showMe3').is( ':visible' ) ) $('.showMe3').slideUp('slow');
});

等等

编辑

如果您有很多这样的东西，您可以实现“ Accordion ”功能，例如通过将所有类名称从 readMore[n] 更改为 readMore，同样是从 showMe[n] 到 showMe。并将你的 JS 更改为:

$(function () {
  $('.readMore').click(function () {
    $('.showMe').slideUp('slow');
    $('.showMe').eq( $( this ).index() ).slideDown('slow');
  });
});

参见jsFiddle .

不要忘记保持 readMore 和 showMe block 在布局中的顺序。