Меню jQuery не скрывается при втором нажатии

Question

Меню jQuery не скрывается при втором нажатии

0

Я пытаюсь изучить некоторые jquery, и я хочу сделать простой снимок, который скрыт в начале, но затем появляется, когда вы нажимаете какой-то текст, но затем скрывается, когда вы нажимаете его снова. Вот код:

Основной HTML:

<h1 class="Menu">Menu</h1>

    <div id="submenu">
        <ul>
            <a href="#"><li>Menu 1</li></a>
            <a href="#"><li>Menu 2</li></a>
            <a href="#"><li>Menu 3</li></a>
            <a href="#"><li>Menu 4</li></a>
            <a href="#"><li>Menu 5</li></a>
            <a href="#"><li>Menu 6</li></a> 
        </ul>
    <div>

JQuery:

$(document).ready(function() {
   $("#submenu").hide(); 
});

$(".Menu").click(function() {
    $("#submenu").show("slow");
    $(".Menu").text("Close Menu");
    $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
});
$(".CloseMenu").click(function() {
    $("#submenu").hide();
    $(".CloseMenu").text("Menu");
    $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

Это потому, что класс не был зарегистрирован в DOM при загрузке страницы, чтобы он не знал, что он ищет? Также здесь JS Fiddle я делал это.

David F. 18 сен. 2013, в 19:27

Источник

Теги:

javascript

jquery

html

3 ответа

1

поскольку класс CloseMenu не существует, когда вы привязываете это событие, которое вам нужно сделать:

$(document).on('click', ".CloseMenu", function() {
  $("#submenu").hide();
  $(".CloseMenu").text("Menu");
  $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

Igor Goldny 18 сен. 2013, в 15:08

1

Попробуйте.toggle()

$('.Menu').toggle( 
  function() {
    //Do something
}, 
  function() {
    //Do Something Else
});

Также попробуйте #submenu {display: none;} вместо jQuery.

jeanhules 18 сен. 2013, в 14:55

Ещё вопросы

Maverick · Accepted Answer · 2013-09-18T15-17-00.000Z

Здесь используйте этот код js

$(document).ready(function() {
   $("#submenu").hide(); 
});

$("#mainmenu").click(function() {
    if($("#submenu").is(":hidden")){
        $("#submenu").show("slow");
        $(".Menu").text("Close Menu");
        $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
    }
    else{
        $("#submenu").hide();
        $(".CloseMenu").text("Menu");
        $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
    }
});

Причина не в том, что вы меняете класс во время выполнения. Используйте.click, только если у вас есть статические селекторы. Как я использовал ID

о, это круто! Я понятия не имел, что вы можете сделать такие условия изначально в jQuery, но теперь я знаю. Спасибо Маверик!