Question

我有3个点击事件

A B C。

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

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

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

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

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

此刻，如果我点击全部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 CODE：

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

等

修改

如果你有很多这样的东西，你可以实现＆＃34;手风琴＆＃34;功能，例如将所有类名从readMore[n]更改为readMore，同样适用于showMe[n]到showMe。并将您的JS更改为：

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

请参阅jsFiddle。

不要忘记在布局中保留readMore和showMe块顺序。

javascript slideToggle在单击另一个时不会隐藏

1 个答案: