Question

如果我点击当前项目，它应该打开和关闭并关闭所有其他项目项目是否已打开。当我点击menu1它只是保持打开..我想要的功能，如它打开它应该关闭，当它关闭它应该打开。请参阅网址

<script language="javascript" type="text/javascript">
    $(document).ready(function() {

        $(".toggle_container").hide();

        $("li.trigger").click(function() {
            $(".toggle_container").hide();
            $(this).next(".toggle_container").slideToggle("slow,");
            $("li.trigger").removeClass("active");
            $(this).addClass("active");
            return false;
        });

    });
</script>
<ul>
    <li class="trigger" id="t1">Menu 1</li>
    <li class="toggle_container">Menu 1 content</li>
    <li class="trigger" id="t2">Menu2</li>
    <li class="toggle_container">Menu2 content</li>
    <li class="trigger" id="t3">Menu3</li>
    <li class="toggle_container">Menu3 content</li>
</ul>

Answer 1

我不确定你的问题是什么，但我确实在代码的第三行末尾看到了一个额外的逗号（...slideToggle("slow,")）。那可能不应该存在。

编辑：检查提供的网址后，我现在看到问题所在。首先，您应该为.toggle_container类添加新样式：

li.toggle_container { display: none; }

这可以防止初始显示子菜单。接下来，如果单击活动或非活动链接，则应在jQuery脚本中考虑：

$(document).ready(function() {
    $("li.trigger").click(function() {
        $(this).next(".toggle_container").slideToggle("slow");
        if (!$(this).hasClass("active")) {
            $(".toggle_container").hide();
            $(".active").toggleClass("active");
            $(this).toggleClass("active");
        }
        return false;
    });
});

就是这样。

Answer 2

在您的代码中尝试这些，

$("selector").addClass("class").siblings().removeClass("class");
or
$("selector").slideToggle("slow").siblings().hide("slow");

Answer 3

您可以使用toggleClass扩展jQuery，如下所示：

//extend jquery
(function($) {
    $.fn.toggleClass = function(check, replace) {
        return this.each(function() {
            if ($(this).hasClass(check)) {
                $(this).removeClass(check);
                $(this).addClass(replace);
            } else {
                if ($(this).hasClass(replace))
                    $(this).removeClass(replace);
                $(this).addClass(check);
            }
        });
    };
})(jQuery);

所以你可以做这样的事情：

<input type="button" value="Toggle" 
onclick="$('#myDiv').toggleClass('expanded','collapsed')"/>

Answer 4

总体而言，这是一个更简单的解决方案：

$(function(){
  $(".toggle_container").hide();
  $("li.trigger").click(function(){
     $(".toggle_container").not($(this).next()).hide();
     $(this).addClass("active").next(".toggle_container").slideToggle("slow")
            .end().siblings().removeClass("active");
  });
});

但请注意，修复原始代码所需的唯一方法是排除您想要隐藏的元素，以便切换正常工作（它总是在切换之前隐藏，因此切换总是“显示”），你通过添加.not()这样做：

$(".toggle_container").hide();
$(".toggle_container").not($(this).next()).hide();

jQuery切换菜单无法正常工作

4 个答案: