jQuery：如何“取消单击”打开的 slideToggle div？答案

【问题标题】：jQuery: how to "declick" a open slideToggle div?jQuery：如何“取消单击”打开的 slideToggle div？
【发布时间】：2011-04-30 19:47:28
【问题描述】：

是否可以“取消单击”已使用 slideToggle 打开的活动 div？

这个函数会打开多个相互独立的文本div，但是打开的div的click(function()仍然是可点击的，所以div会反弹关闭然后再次打开。这主要是一种用户体验；我希望用户无法点击已打开的 div。

jsfiddle: http://jsfiddle.net/auUxk/12/

$(".entry-content").hide();
$(".entry-title").click(function() {
    $(".entry-content").hide();
$(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 Lorem Ipsum

    </div></div>

<div class="entry-post">

       <h2 class="entry-title">Post Title 2</h2>

       <div class="entry-content">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum 

    </div></div>

【问题讨论】：

你的意思是有两个结束 div 标签？
@xixonia，如果你看看他发布的JS Fiddle，这不是一个错误，但可能是复制粘贴代码摘录的人工制品。
精氨酸。我的错。更正了 HTML。这就是 Wordpress 循环生成的标记。
修复了我的答案以完成您的要求。抱歉，我第一次错过了重点:)

标签： jquery slidetoggle

【解决方案1】：

我想这就是你想要的。似乎大多数人都没有注意到您一次只希望保留一个打开的 div。

http://jsfiddle.net/entropo/WnpGv/

jQuery(document).ready(function($) {
    $(".entry-title").click(function() {
        $this = $(this);
        var $content = $this.next(".entry-content");
        if (! $content.is(":visible")) {
            $(".entry-content:visible").slideToggle(100);
            $content.slideToggle(500);
        }
    });
});

编辑：
这种 UI 模式称为accordion。还有lots of plugins 以更戏剧化/更复杂的方式实现这一目标。

另外，jQuery UI 有一个手风琴in their API。请记住，手风琴 API is being revamped for 1.9。

【讨论】：

非常好，谢谢。正是我想要做的，与我正在构建的网站上的一些其他功能保持一致。我意识到有插件和其他复杂的手风琴，但我想让它保持相当简单。我也将使用背景颜色更改 CSS 来突出显示活动文本 div。是否也可以为 h2 标题提供悬停和活动颜色？
@songdogtech - 当然，一点点类切换和一点额外的 CSS 就可以解决这个问题：jsfiddle.net/entropo/WnpGv/23

【解决方案2】：

“我希望用户无法点击一个已经打开的 div。”

这将起作用：http://jsfiddle.net/xixionia/9P6My/

<div>
    <h2 class="entry-title">Post Title 1</h2>
    <div class="entry-content">Lorem Ipsum Lorem Ipsum</div>
</div>

<div>
    <h2 class="entry-title">Post Title 1</h2>
    <div class="entry-content">Lorem Ipsum Lorem Ipsum</div>
</div>

和

$(".entry-title").click(function() {
    $(this)
        .next('.entry-content:not(:visible)')
        .slideToggle(500);
});

还有 CSS：

.entry-content
{
    display: none;
}

或者，您始终可以跳过 css 并在所有条目内容分类元素上使用 hide()。 :)

这将使用不可见的“.entry-content”类切换滑动第一个后续元素，并且不会将它们滑动关闭。

如果您想完全解除点击事件的绑定，可以使用 undbind('click')

$(".entry-title").bind('click', function() {
    $(this)
        .unbind('click', arguments.callee)
        .next('.entry-content')
        .slideToggle(500);
});

这将是最精明的方法，并且不会取消绑定可能绑定到点击事件的其他函数。

或者，您可以使用事件命名空间解除绑定：

$(".entry-title").bind('click.slideopen', function() { // bind a click event with the slideopen namespace
    $(this)
        .unbind('.slideopen') // unbind all events in the slideopen namespace
        .next('.entry-content')
        .slideToggle(500);
});

你可以在这里看到一个例子：http://jsfiddle.net/xixionia/9P6My/6/

【讨论】：

我猜这将允许打开多个“div”。这就是“隐藏”正在做的事情
对不起，我指的是第二个隐藏。最初他在每次点击时都隐藏起来。我添加了缺少的 CSS。
我的错； HTML 已更正。这就是 Wordpress 循环生成的标记。
如果人们反对我的回答，请解释原因。
感谢您的帮助，但我希望一次只能打开一个 div，就像现在一样。

【解决方案3】：

如果你想点击关闭，你可以这样做：

$(".entry-content").hide();
$(".entry-title").click(function() {
    $(".entry-content").hide();
    $(this).parent().children(".entry-content:visible").slideToggle(500); 
});

这将关闭所有 div，但不会再次打开它。如果您想保持打开状态：

$(".entry-content").hide();
$(".entry-title").click(function() {
    var d = $(this).next();
    if (!d.is(":visible")) {
        $(".entry-content").hide();
        d.slideToggle(500); 
    }
});

【讨论】：