Question

在我的网站上我使用了几个名为＆＃34; ligne＆＃34;的div。在这些div中，我有5个div，还有一个div＆＃34; .content＆＃34;是隐藏的。当点击＆＃34; .ligne＆＃34;时，它会显示隐藏的div＆＃34; .content＆＃34;被点击的＆＃34; .ligne＆＃34;。当点击另一个＆＃34; .ligne＆＃34;时，它会关闭所有＆＃34; .content＆＃34;这些都是开放的，并显示隐藏的div＆＃34; .content＆＃34;被点击的＆＃34; .ligne＆＃34;。

重要的是，当点击“内容”时，内容很重要。内容不会滑动。

我的问题是当一个＆＃34; .content＆＃34;打开时，我想关闭＆＃34; .content＆＃34;，再次点击＆＃34; .ligne＆＃34;，而不是＆＃34; .content＆＃34;。< / p>

它有效，它会关闭＆＃34; .content＆＃34;，但再次选择它。

这是一个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

首先，必须检查内容是否可见，以便了解是否必须向上或向下滚动。

第二件事是你点击了一个带有content类的子元素，如果是这样的话：return 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

Answer 2

$('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/

打开div onclick并关闭其他人

2 个答案: