1

私はJavaScriptに関しては最高ではなく、解決策を見つけることに固執しています。私はここで同様の質問をしましたが、私の場合にそれを実装しようとすると、メニューが壊れるか、まったく違いがありません。

親メニュータブを繰り返しクリックするだけでなく、メニューの外側、つまりどこでもクリックして閉じるために、メニュー（クリックすると開く）を取得しようとしています。

私のコードは次のとおりです。

var toggleUpdatesPulldown = function(event, element, user_id) {
    if( element.className=='updates_pulldown' ) {
        element.className= 'updates_pulldown_active';
        showNotifications();
    } else {
        element.className='updates_pulldown';
    }
}

このスニペットは、より多くのJavaScriptの真ん中にあり、これがデフォルトの動作バージョンです。ユーザーからのクリックにより、メニューコンテナのクラス名が変更され、表示されるかどうかが決まります。ここの別の投稿から、私は次のことを実装しようとしましたが、クリックオフしてクラス名も変更できるようにしました。

var toggleUpdatesPulldown = function(event, element, user_id) {
    if( element.className=='updates_pulldown' ) {
        element.className= 'updates_pulldown_active';
        showNotifications();
    } else {
        element.className='updates_pulldown';
    }

    ev.stopPropagation();

    $(document).one('click', function() {
        element.className='updates_pulldown';
    });
}

これに取り組むためのアドバイスはありますか？JavaScriptを使って作業しているように見えるので、JavaScriptについてもっと学びたいと思います。

4

1 に答える 1

0

あなたがまだ解決策を探していることを願っています。これは、このhttp://jsfiddle.net/sU9ZJ/6/の実用的なデモです

(function(win, doc) {
  var lis = $('#menu>ul>li>a').on('click', function(e) {
    e.preventDefault();
    var a = $(this);
    var li = $(this).parent();
    function close(dev) {
      if (!(dev && li.has(dev.target)[0])) {
        li.addClass('inactive').removeClass('active');
        doc.off('click', close);
        a.trigger('close');
      }
    }
    function open(dev) {
      li.addClass('active');
      doc.on('click', close);
      a.trigger('open');
    }
    if (li.hasClass('active')) {  close() } 
    else {  open(); }        
  })      
})(this, $(document))

また、開いたり閉じたりするときに使用できるイベントをいくつか追加しました

$('#menu>ul>li>a').on('open', function(e) { 
     console.log('menu open', this) 
}).on('close', function(e) { 
      console.log('menu closed', this) 
})

申し訳ありませんが、これは jQuery に依存します。ネイティブバージョンを書くのが面倒です:)。また、これは IE ではテストされていませんが、そうでない場合でも動作させるのは難しくありません。

于 2012-07-05T03:21:54.107 に答える