打开 div onclick 并关闭其他

Question

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

在“.content”内单击时，内容不会向上滑动，这一点很重要。

我的问题是，当打开“.content”时，我想关闭打开的“.content”，再次点击“.ligne”时，而不是“.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 的答案，但通过类完成。

我更喜欢使用类，因为它可以让您的源代码更有意义，让其他开发人员更容易阅读。

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

Answer 2

首先必须检查内容是否可见，这样您就知道是否必须向上或向下滚动。

第二件事是你点击一个类content的子元素，如果是这样：返回false。

如下图：

$('body').on('click', '.ligne', function () {
  if ($(this).children(".content").is(":visible")) {
    $(this).children(".content").slideUp(300);
  } else {
    $(this).children(".content").slideDown(300);
  }
}).children().click(function(e) { // trigger click on children
    if ($(e.target).hasClass("content")) { // if e.target has the class '.content'
    return false; // dont do the code above '.children().click()'
  }
});

JSFiddle Demo