0

div の拡大と縮小を切り替えようとしていますが、基本的にはサブナビ付きのメニューです。したがって、最初にサブナビを非表示にするために高さを 48px に設定し、JS がない場合でも適切に見えるようにします。次に、div を開閉するトグルを割り当てます (この場合は高さを設定します)。

ただし、更新を続け、自動的に div を開きます。開いたままでいるのではなく、ただ拡大し、警告を発してから再び閉じます。

jQuery(document).ready(function($) { 
$('#nav-wrapper').css('height','48px');
  $('#menu-item-18').click(function() {
    var open = false;
    if(isOpen) {
      $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
      var isOpen = false;
      alert ('not open')
    } else { 
      $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
      isOpen = !isOpen; 
      alert ('open') 
    };
  });
});

これを複雑にしすぎている可能性があります。もっと簡単な解決策もあると確信しています。

4

3 に答える 3

0

これは機能するはずです（複数の要素も処理します）

$('#menu-item-18').click(function() {
    var isOpen = $(this).is('.open');
    if(isOpen) {
        $('#nav-wrapper').animate({ height: '-=44' }, 0); 
        $(this).removeClass('open');
        alert ('not open');
    } else { 
        $('#nav-wrapper').animate({ height: '+=44' }, 0); 
        $(this).addClass('open');
        alert ('open') ;
    };
});
于 2012-04-19T19:08:45.047 に答える
0

素敵で簡単

$('#menu-item-18').click(function() {
    $('#nav-wrapper').slideToggle(200, //speed in ms
      function() {
        //callback (runs after shown or hidden)
        $(this).is(':visible'); //Returns true if not hidden false if hidden
      }
    );     
});
于 2012-04-19T19:09:17.043 に答える
0

isOpenはローカル スコープで定義されているため、値は常に false になります。クリックハンドラーの外に移動する必要があり、isOpen = !isOpen;値を切り替えるだけです。下記参照、

  $('#nav-wrapper').css('height','48px');
  var isOpen = false;

  $('#menu-item-18').click(function() {
    isOpen = !isOpen; 
    if(isOpen) {
      $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
      alert ('not open')
    } else { 
      $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
      alert ('open') 
    };
  });
于 2012-04-19T19:05:07.327 に答える