jQuery 幻灯片一次切换一个 div 而不是全部独立
Posted
技术标签:
【中文标题】jQuery 幻灯片一次切换一个 div 而不是全部独立【英文标题】:jQuery slideToggle one div at a time instead of all independently 【发布时间】:2011-04-29 03:13:44 【问题描述】:我正在使用下面的函数来切换 div,有了它,任何一个 entry-content div 都可以独立地打开或关闭。
如果任何时候都只打开一个 entry-content div,那就太好了。单击已关闭的条目标题 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>
【问题讨论】:
【参考方案1】:每次单击时都将它们全部关闭:
jQuery(document).ready(function($)
$(".entry-content").hide('slow');
$(".entry-title").click(function()
$(".entry-content").hide();
$(this).parent().children(".entry-content").slideToggle(500); );
);
示例:http://jsfiddle.net/auUxk/
【讨论】:
但是如果你切换一个已经打开的,它会显示div而不是隐藏它,因为你之前隐藏了它。【参考方案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”类只是添加了一些特殊的样式(比如高亮)。
【讨论】:
感谢您的解释;我最终选择了以下切换操作的答案。【参考方案3】:我不理解其他人给出的那些例子,但最后我在另一个地方找到了答案,如果有人需要更简单(或不同)的解决方案: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);
);
【讨论】:
以上是关于jQuery 幻灯片一次切换一个 div 而不是全部独立的主要内容,如果未能解决你的问题,请参考以下文章