Question

尝试练习手风琴。我试着写一个非常简短的代码。手风琴有标题和内容。单击标题时，内容应隐藏或显示，具体取决于其可见性。

任何输入都会很棒。谢谢你们

编辑：我试图避免使用.toggle

注意 手风琴内容通过css隐藏。

function open( accordion ) {

    $(".accordion-content").show(100);

}

function close ( accordion ) {

    $(".accordion-content").hide(100);

}

$(".accordion").click(function() {

    if ( $(".accordion-content:hidden")) {
        open();
    }

    else {
        close();    
    }

});

我应该在条件的第二部分添加if子句吗？所以它是这样的：

else if ( $(".accordion-content:visible")) { 
    close();
}

Answer 1

而不是..

$(".accordion-content:hidden")

执行：

$(".accordion-content").is(':hidden')

由于您使用＆＃34; else＆＃34;，因此确实不需要最后一个＆＃34;可见＆＃34 ;,选项。但如果你想使用它，那么：

$(".accordion-content").is(':visible')

Answer 2

已编辑以匹配您的函数名称

这是实现此类行为的常用方法。它可以用于其他手风琴。

比方说，有一个项目列表，非常相似，我们只希望其中一个被高亮（这里，一个是可见的）

1→为所有项目提供一个通用选择器。基本上是一堂课。该类不需要附加css规则。它只是一个选择器。对于此示例，.accordion

2→用独特的东西绑定你的物品。在这里，您不需要这个，因为标题已经是面板的一部分。

3→激活时（单击，或触发该事物的其他内容）。 - 停用所有具有公共类的项目 - 激活当前项目

会给你类似的东西

$(".accordion").on("click",function(){
    $(".accordion").not(this).close();
    $(this).open();
});

关闭并打开必须在accordion-content元素中查找accordion，并显示或隐藏它...

顺便说一句，您的open和close函数都是错误的。它应该是

$(this).find(".accordion-content").show();

Answer 3

试试这个

$(".accordion").click(function() {
   $(".accordion-content").toggle(100);
}

修改

因为你不想切换

$(".accordion").click(function() { 
  var cur_cont = $(this).find(".accordion-content"); 
  $(cur).show(100); 
  $(".accordion-content").not(cur_cont).hide(100); 
}

jQuery：手风琴 - 如果隐藏，显示，否则隐藏？

3 个答案:

试试这个

修改