Событие слайда JQuery и высота Div не изменяются, как ожидалось - PullRequest
Новая
       21

Событие слайда JQuery и высота Div не изменяются, как ожидалось

0 голосов
/ 15 ноября 2009

Я работаю с JQuery и пытаюсь изменить html блока div, когда дочерний элемент div входит и выходит. Моя проблема в том, что приведенный ниже код не меняет значение html #menu_text. Он отображает только «Скрыть меню» и не определяет реальную высоту, измененную с помощью slideToggle. 

 $('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   console.log('Debug : %s', $('#menu_links').height());

   if ($('#menu_links').height() == 1)
    $('#menu_text').html("Show Menu");
   else if ($('#menu_links').height() == 20)
    $('#menu_text').html("Hide Menu");

  });
 });

После проверки в консоли firebug значение высоты никогда не меняется с 20, если вы не нажмете на div очень быстро несколько раз, затем оно изменится на 1. (Я должен добавить, что высота, определенная в таблице стилей, равна 20) *

В документе сказано, что slideToggle влияет только на высоту объекта. Я что-то пропустил? Спасибо за помощь. 

    <div id="menu"><p id="menu_text">Show Menu</p>
     <div id="menu_links">
            Stuff
   </div>
 </div>

Ответы [ 2 ]

1 голос
/ 16 ноября 2009

Попробуйте: 

$('#menu').click(function(){
    $('#menu_links').slideToggle('slow', function(){
        $('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu");
    });
});

Там вы будете устанавливать текст меню в зависимости от того, виден ли элемент ссылки или нет. Вероятно, вам лучше не зависеть от высоты и ширины элемента, поскольку в худшем случае они могут различаться в зависимости от браузера (и в этом случае они также будут меняться в зависимости от содержимого элемента links).

0 голосов
/ 16 ноября 2009

Вы также можете использовать data () для сохранения вашего состояния. Это отличный трюк для сохранения состояния или чего-либо еще 

$('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   var $this = $(this);
   var toggled = $this.data('toggled');
   if (toggled)
    $('#menu_text').html("Show Menu");
   else 
    $('#menu_text').html("Hide Menu");
   $this.data('toggled', !toggled)

  });
 });
...