jQuery：如何“打开”打开slideToggle div？

是否有可能“滑落”已用slideToggle打开的活动div？jQuery：如何“打开”打开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>

来源

2011-04-30 markratledge

你的意思是有两个闭合的div标签？ – 2011-04-30 19:53:48

@xixonia，如果你看看他发布的[JS Fiddle]（http://jsfiddle.net/auUxk/12/），这不是一个错误，但可能是复制粘贴代码片段的人工制品。 – 2011-04-30 19:56:37

Arg。我的错。 HTML已更正。这是Wordpress循环生成的标记。 – markratledge 2011-04-30 20:05:02

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

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。

来源

2011-04-30 20:53:40 entropo

非常好，谢谢。正是我想要做的，以保持我正在构建的网站上的其他功能。我意识到有插件和其他复杂的手风琴，但我想保持它相当简单。我也将使用背景颜色变化CSS，以突出显示活动文本div。是否有可能给h2标题悬停和主动颜色？ – markratledge 2011-05-01 01:09:46

@songdogtech - 当然，有点类切换和一点额外的CSS将处理：http://jsfiddle.net/entropo/WnpGv/23/ – entropo 2011-05-01 06:02:19

谢谢！效果很好。 – markratledge 2011-05-03 03:11:12

“我想用户无法点击已打开的股利。”

这将工作：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和使用隐藏（）在所有入口内容分类的元素上。 :)

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

如果你想真正从click事件取消绑定自己完全，你可以使用undbind（“点击”）

$(".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/

来源

2011-04-30 19:58:45

我想这将允许多个“div”打开。这就是“隐藏”在做什么 – 2011-04-30 20:00:05

对不起，我的意思是第二个隐藏。原本他每次点击都隐藏起来。我已经添加了缺少的CSS。 – 2011-04-30 20:01:53

我的错误; HTML被纠正。这是Wordpress循环生成的标记。 – markratledge 2011-04-30 20:06:04

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

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

这将关闭所有divs，但不会再打开它。如果你想保持它打开：

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

来源

2011-04-30 20:01:52

jQuery：如何“打开”打开slideToggle div？

回答

相关问题