Меню jQuery toggle не работает

Question

Если я нажимаю на текущий элемент, он должен включать и выключать и закрывать все остальные , если он открыт. Когда я нажимаю на меню1, он просто держится открытым. Я хочу использовать такие функции, как когда он открыт, он должен закрываться, когда он закрывается, он должен открыться. Пожалуйста, смотрите 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

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

EDIT: После проверки предоставленного 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; 
    }); 
}); 

И это все.

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

Вот несколько более простое решение:

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