Я пытаюсь изучить некоторые 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 я делал это.
Здесь используйте этот код 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
поскольку класс CloseMenu не существует, когда вы привязываете это событие, которое вам нужно сделать:
$(document).on('click', ".CloseMenu", function() {
$("#submenu").hide();
$(".CloseMenu").text("Menu");
$(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});
Попробуйте.toggle()
$('.Menu').toggle(
function() {
//Do something
},
function() {
//Do Something Else
});
Также попробуйте #submenu {display: none;} вместо jQuery.