打开div onclick并关闭其他

Question

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

重要的是，在'.content'内单击时，内容不会滑动。

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

它的作品，它关闭“。内容”，但oppen它再次。

这里是一个的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'); 

}); 

如果你更新你的代码下面，它会工作。这就像大卫赫斯克斯的回答，但是完成了课堂。

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

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