У меня есть следующий образец. Я хочу достичь, изменив свойства CSS. Как мне это сделать?
<div id="btn-toggle-menu">Menu</div>
<div id="menu-wrapper">
<ul>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
</ul>
</div>
JQuery:
$('#menu-wrapper').hide();
$('#btn-toggle-menu').on('click', function(e) {
var menu = $('#menu-wrapper');
if(menu.is(':hidden')) {
menu.show();
} else {
menu.hide();
}
});
JQuery Hide
& Show
ведет себя как display:none
CSS display:none
& display: [the default display value of the element]
Рабочая Fiddle <- с минимальными изменениями (я бы на самом деле использовать это)
Попробуйте JQuery.toggle()
$( "#btn-toggle-menu" ).click(function() {
$( "#menu-wrapper" ).toggle( "slow", function() {
// Animation complete.
});
});
попробуйте jquery
$( "#btn-toggle-menu" ).click(function() {
$( "#menu-wrapper" ).toggle();
});
Хорошо.
<div id="btn-toggle-menu">Menu</div>
<div id="menu-wrapper">
<ul>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
</ul>
</div>
Это ваш код?
Используя jQuery, вы можете выбрать, какой элемент принимает какое свойство для какого события. jQuery фактически переключает свойства CSS. Итак, что вы хотите, будет достигнуто, когда вы укажете правильный element
event
и css-property
.
Взгляни:
Здесь event
будет click
а элемент для перемещения его display
будет ul
.
Вы хотите показать/скрыть ul
. Так что это сработает.
$('#btn-toggle-menu').click(function() { // on the click event
$('#menu-wrapper').toggle(); // toggle would hide/show it. on its own :)
})
Вы можете узнать об этом здесь: http://api.jquery.com/toggle/
Примечание. Для этого у вас должен быть плагин jQuery. Чтобы убедиться, что события jQuery произойдут. Вы можете загрузить плагин в нижнем колонтитуле сайта, который я предоставил. :) Удачи!
Ваш код:
Ваш код тоже хорош, но его много и больше похоже на жесткий код!
$('#menu-wrapper').hide();
$('#btn-toggle-menu').on('click', function(e) {
var menu = $('#menu-wrapper');
if(menu.is(':hidden')) {
menu.show();
} else {
menu.hide();
}
});
Сначала это будет выглядеть в меню, если оно будет скрыто, тогда оно будет показано! В противном случае скрыть его. Это хорошо и правильно! Но немного длинный, API jQuery поможет вам легко решить эту проблему. Использование их плагина. Загрузите его по ссылке внизу, последний плагин позволит вам использовать все последние функции jQuery. :)
Редактирование, которое я сделал в вашем коде:
Я просто редактировал код jQuery со своей скрипки, и это было результатом:
скрипка. Здесь я смог скрыть/показать div :) И это был всего лишь один код строки!