Question

我是jQuery的新手所以我正在尝试使用一小段代码。我正在尝试创建一种手风琴菜单。

首先，（在看了一些教程之后）我做了一些非常类似于我想要的事情：

<script type="text/javascript">
$(document).ready(function(){
    $(".content").hide();
    mainmenu();
});

function mainmenu(){        
    $(".option").click(function(){
            $(".content").slideUp("slow");
            $(this).children("div.content").slideDown("slow");
    });
}

它工作正常，但如果我点击一个打开的选项，它会执行“隐藏”+“显示”动画。

所以，我试图添加一个条件来让菜单做我想要的，但它不起作用。即使是在开头隐藏的内容现在也不起作用。

现在不起作用的代码就是这一段：

<script type="text/javascript">
$(document).ready(function(){
    $(".content").hide();
    mainmenu();
});

function mainmenu(){        
    $(".option").click(function(){
            if (($(this).children("div.content").is(":hidden")){
                $(".content").slideUp("slow");
                $(this).children("div.content").slideDown("slow");
            }else{
                $(".content").slideUp("slow");
            }
    });
}

因此，如果内容未被隐藏，则应该隐藏内容而不是隐藏并再次显示。

我不知道我是否正在以一种糟糕的方式解决问题或者是什么。我对此很陌生。

如果有人可以帮助我，我会非常感激。

感谢。

编辑：我在if语句中错过了一个括号。它现在正在运作！顺便说一句，非常感谢

Answer 1

看起来像是一个错字。

if (($(this).children("div.content").is(":hidden")){

应该是

if ($(this).children("div.content").is(":hidden")){

Answer 2

您可以使用“.slideToggle（）”，它与slideUp（）或slideDown（）完全相同。您可以做的另一件事是在打开一个内容div时使用.siblings（）方法关闭所有其他内容div。有关详细信息，请参阅jQuery UI Accordion - How to remove style completly?。我举了一个jQuery和HTML结构的例子。

让jQuery与if语句一起使用

2 个答案: