Question

是否可以“减少”使用slideToggle打开的活动div？

此功能可以相互独立地打开多个文本div，但是open 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

我认为这就是你想要的。似乎大多数人都没有注意到你想要一次只保留一个空格。

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。

Answer 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”类切换第一个后续元素，并且不会将它们滑动关闭。

如果您想完全取消与Click事件的绑定，可以使用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); 
    }
});

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

3 个答案: