jQuery：如何“取消点击”一个打开的slideToggle div？

Question

是否可以“取消点击”已使用 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>

Answer 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);
        }
    });
});

编辑：< br>
这种 UI 模式称为“手风琴”。还有很多插件可以以更戏剧性/复杂的方式实现这一点方式。

另外， jQuery UI 有一个手风琴 在他们的 API 中。请记住，手风琴 API 是正在针对 1.9 进行修改。

Answer 2

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

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

<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”的第一个后续元素 。 -内容”类不可见，并且不会将它们滑动关闭

如果您想完全解除自己与点击事件的绑定，您可以使用 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/

Answer 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); 
    }
});