JQuery меню переключения не работает

Question

Если я нажму на текущий элемент, он должен включиться и выключиться и закрыть все остальные пункт, если он открыт. Когда я нажимаю на menu1, он просто остается открытым. Я хочу, чтобы такие функции, как когда он открыт, он должен закрываться, когда он закрывался, он должен открываться. Пожалуйста, смотрите URL

<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

Вот немного более простое решение:

$(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();

Answer 2

Попробуйте это в своем коде,

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

Answer 3

Вы можете просто расширить jQuery с помощью toggleClass, как показано ниже:

//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

Я не уверен, что ваш вопрос, но я вижу дополнительную запятую в конце третьей строки вашего кода (...slideToggle("slow,")). Это, вероятно, не должно быть там.

РЕДАКТИРОВАТЬ: После проверки предоставленного URL я теперь вижу, в чем проблема. Сначала вы должны добавить новый стиль для класса .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;
    });
});

И это все.