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

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

Basic 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 на странице загрузки, так что он не знает что он ищет? Also here is the JS Fiddle I was doing it in.

источник

2013-09-18 David F.

Вашего HTML является недействительным. – j08691

Когда вы вызываете функцию 'click', AT THAT TIME, jquery добавляет обработчик кликов к элементам, которые соответствуют вашему селектору. Это означает, что если вы динамически меняете элемент позже, чтобы соответствовать одному и тому же селектору, обработчик кликов не будет применяться задним числом. Взгляните на http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements информацию о том, как это сделать для динамически изменяющихся элементов. –

Удивительный! Спасибо Баки за этот ресурс! –

Здесь, используйте этот код 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

источник

2013-09-18 17:04:35 Maverick

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

m рад, я мог бы помочь – Maverick

Try .toggle()

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

попробовать Также #submenu {дисплей: нет;} вместо JQuery.

источник

2013-09-18 17:07:11 jeanhules

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

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

источник

2013-09-18 17:07:42

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

ответ

Смежные вопросы