jquery - 打开div onclick并关闭其他

Question

在我的网站上，我使用了几个名为“ligne”的 div。在这些 div 中，我有 5 个 div，其中一个 div“.content”被隐藏了。单击“.ligne”时，它会显示所单击“.ligne”的隐藏 div“.content”。当点击另一个“.ligne”时，它关闭所有打开的“.content”，并显示被点击“.ligne”的隐藏div“.content”。

重要的是，当在“.content”中单击时，内容不会向上滑动。

我的问题是，当打开“.content”时，我想在再次单击“.ligne”时关闭打开的“.content”，但不是在“.content”内部。

它起作用了，它关闭了“.content”，但又打开了它。

这里有一个 jsfiddle 可以看到它的实际效果:

http://jsfiddle.net/L9tr0uyq/

这是我的 html:

<div class="row ligne">

    <div class="col-xs-3 nom">TEST 1</div>
    <div class="col-xs-3 annee">2010</div>  
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">LIVE</div> 
    <div class="col-xs-12 content">


Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.
</div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">TEST 2</div>
    <div class="col-xs-3 annee" data-annee="2013-12-09">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEISURE</div> 
    <div class="col-xs-12 content">


Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.

</div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">TEST 3</div>
    <div class="col-xs-3 annee" data-annee="2013-11-04">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div>
    <div class="col-xs-3 type">MOVE</div> 
    <div class="col-xs-12 content">


Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.

</div>
  </div>

我的CSS:

body {font-size:12px;line-height:16px;}

.row.ligne {border-top:1px solid black;cursor:pointer}
.content {display:none}
.title {position: absolute;cursor:pointer}
.titre {position:fixed;width:100%;background-color:white;z-index:100}
#index {padding-top:16px;}

和我的 Jquery:

$('body').on('click', '.ligne', function () {

  $(this).siblings().children(".content").slideUp(300);
  $(this).children(".content").slideDown(300);

});


$('body').on('click', '.ligne .col-xs-3', function () {

  $(".content").slideUp(300)

});

Answer 1

$('body').on('click', '.ligne', function () {

  if(! $(this).hasClass('ouvert')) {
    $(this).siblings().children(".content").slideUp(300);
    $(this).children(".content").slideDown(300);
    $(this).addClass('ouvert');
  }

});


$('body').on('click', '.ligne.ouvert', function () {

  $(this).children(".content").slideUp(300);
  $(this).removeClass('ouvert');

});

如果您将代码更新为以下内容，它会起作用。这就像 Daan Heskes 的回答，但已经完成了类(class)。

我更喜欢使用类，因为它为您的源代码增添了更多意义，这使其他开发人员更容易阅读。

http://jsfiddle.net/L9tr0uyq/9/