打开div onclick并关闭其他div
打开div onclick并关闭其他div
提问于 2015-12-02 22:56:11
在我的网站上，我使用了几个名为"ligne“的div。在这些div中，我有5个div，其中一个div ".content“是隐藏的。当点击".ligne“时，它显示了被点击的".ligne”的隐藏div ".content“。当点击另一个".ligne“时，它会关闭所有打开的".content”，并显示被点击的".ligne“的隐藏div ".content”。
重要的是，当在'.content‘里面点击时，内容不会slideUp。
我的问题是，当".content“打开时，我想关闭打开的".content"，当再次单击".ligne”时，而不是在".content“内部。
它起作用了，它关闭了".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)
});回答 2
Stack Overflow用户
发布于 2015-12-02 23:09:29
第一件事是必须检查内容是否可见，这样你就知道你需要向上还是向下滚动。
第二件事是单击类为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()'
}
});Stack Overflow用户
发布于 2015-12-02 23:30:44
$('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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34045817
复制相关文章
相似问题
腾讯云开发者
