У меня есть jQuery, который переключает div на клик.Другие способы скрытия div
$(document).ready(function() {
$('#showmenu').click(function() {
$('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
$('.sidebarmenu').toggle("slide");
});
});
Как я могу сделать то же самое без использования
display:none;
??
Посмотрите на смещение решения на основе
<button id="showmenu" type="button">Show menu</button></div>
<div class="sidebarmenu" style="position: absolute; left: -200000px">
Can the button value change to "show" or "hide"
</div>
затем
$(document).ready(function() {
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
$('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
if(hidden){
$('.sidebarmenu').css({
position: 'absolute',
left: -200000
})
} else {
$('.sidebarmenu').css({
position: '',
left: 0
})
}
$('.sidebarmenu').data("hidden", !hidden);
});
});
Demo: Fiddle
Вы можете использовать visibility:hidden; css свойство, которое работает так же.
Существует еще одна альтернатива, которая является opacity установить opacity:0
'visibility' на самом деле не работает так же, как' display'. – Itay
@Itay на стороне клиента он выполняет то же самое ... не так ли? –
Нет. [В чем разница между видимостью: скрытой и отображаемой: нет?] (Http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) – Itay
не уверен, если я получил ваш вопрос .. но я догадывался, вы можете использовать hide().
$('.sidebarmenu').hide();
внутри document.ready $(document).ready(function() { функция
Вы можете также поместить это с помощью .show() и .hide()
($('#showmenu').is(':visible')) ? $('.sidebarmenu').show()
: $('.sidebarmenu').hide();
А на странице загрузки скрыть DIV как
$('.sidebarmenu').hide();
См FIDDLE
, но как скрыть div при загрузке? – Bittu
Посмотрите мою скрипку – Gautam3164
@Bittu добавить '$ ('. Sidebarmenu'). Hide()' на загрузке страницы –
Чтобы скрыть DIV и может использовать Visible="false" и показывают использование Visible="true"
$(document).ready(function() {
$('#showmenu').click(function() {
$('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
$('.sidebarmenu').toggle("show");
});
});
Что случилось с 'display: none'? – Itay
Это нарушение некоторых других кодов, которые я не могу опубликовать здесь. Когда я удаляю отображение: none; код работает нормально. Но я хочу, чтобы div был скрыт при загрузке. – Bittu
Возможно, вам стоит улучшить другой код, а не пытаться решить проблему. –