打開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/