我正在使用下面的函数来切换div,并且使用它,可以独立于所有条目打开或关闭任何一个条目内容div。
如果只有一个入口内容div可以随时打开,那将会是多么美妙。单击关闭的entry-title div将关闭任何其他entry-content div,然后打开单击的div。我需要保留html标记,因为它是由Wordpress动态创建的。这可能吗?
功能:
jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
});
HTML
<div class="entry-post">
<h2 class="entry-title">Post Title 1</h2>
<div class="entry-content">Lorem Ipsum...
</div></div>
<h2 class="entry-title">Post Title 2</h2>
<div class="entry-content">Lorem Ipsum...
</div></div>
More of the same....
</div>
答案 0 :(得分:10)
每次点击一次时,只需将它们全部关闭:
jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
$(".entry-content").hide();
$(this).parent().children(".entry-content").slideToggle(500); });
});
答案 1 :(得分:2)
是的,你可以使用这个逻辑:
$(".entry-title").click(function() {
// hide all entry title elements
$('.entry-title').hide();
// show the clicked one
$(this).show();
});
您可以将其调整为使用切换而不是隐藏/显示。
我通常通过为元素分配特殊的css类来做这种逻辑(最好将事物分开)。所以当我点击元素时,我会向它添加一个类。但是,当您单击另一个元素时,您必须使用该类的元素,但您只需要一个元素。所以你必须修改它。首先从包含它的所有元素中删除该类,然后将其添加到单击元素。
$(".anyAffectedElement").click(function() {
// remove any instances of special class
$('.enabledElement').removeClass('eneabledElement');
// add special class to clicked element
$(this).addClass('enabledElement');
});
^这只是一个普遍的逻辑,你怎么能处理这样的事情。在简单的情况下,'enabledElement'类只是添加了一些特殊的样式(如高亮)。
答案 2 :(得分:0)
我不理解其他人给出的那些例子,但最后我在其他地方找到了答案,如果有人需要更简单(或不同)的解决方案:http://jsfiddle.net/bipen/zBdFQ/1/
@markratledge - 首先你需要提供你的div而不是类的id ...
$("#link1").click(function(e) {
e.preventDefault();
$("#div1").slideDown(slow);
$("#div2").slideUp(slow);
});
$("#link2").click(function(e) {
e.preventDefault();
$("#div1").slideUp(slow);
$("#div2").slideDown(slow);
});