Question

当页面加载时，我想要显示内容的元素和隐藏内容的其他元素。当用户单击标题时，元素将在隐藏和显示之间切换，具体取决于其当前状态。我写的脚本有效，但它有一个夸克，我觉得它需要有一个if / else来确定.content的状态来确定点击。目前，它要求用户在隐藏元素上单击两次以显示.content。

 $('#services .content').hide();
 $('.header').toggle(function() {
    $(this)
       .addClass('active')
       .next('.content').slideUp();
    }, function() {
       $(this)
       .removeClass('active')
       .next('.content').slideDown();
 });

以下是jsfiddle

的链接

非常感谢任何帮助。谢谢。

Answer 1

如果你在toggle函数中交换你的函数，它应该会给你你想要的效果 -

$(function(){
    $('#services .content').hide();
    $('.header').click(function() {
        if ($(this).next().is(':visible')) $(this).addClass('active').next('.content').slideUp();
        else $(this).removeClass('active').next('.content').slideDown();
    });
})

更新了小提琴 - http://jsfiddle.net/daCkp/1/

Answer 2

http://jsfiddle.net/tg5eZ/

否if / else

$(function() {
    $('#services .content').hide();
    $('.header').click(function() {
        $(this).toggleClass('active').next('.content').slideToggle();
    })
});

我也会设置

#services .content

div style to

display:none

并删除

 $('#services .content').hide();

这使它在Opera中看起来更好。当我打开你提供的jsfiddle时，我看到这个div是可见的然后它被隐藏了。

在页面加载时切换slideDown / slideUp多个状态

2 个答案: