jquery - クリックとオフのクリックでドロップダウンdivを切り替えるより良い方法はありますか？

Question

現在、ドロップダウンdivメニューを次のコードで切り替えています。

$(function() {
  function toggleMenu(show) {
    $(".dropdownInfo").toggle(show);
    $('.userNavBar').css('background-color', show ? '#444' : '#333');
    $('.upperBar').css('border-top-color', show ? '#ff556f' : '#333');
  };
  $('.userNavBar').click(function(e) {
    toggleMenu(true);
    e.stopPropagation();
  });
  $("body").click(function(e) {
    toggleMenu(false);
  });
});

divを切り替えるためのより速く/より良い/より効率的な方法はありますか？これは非常に大きなコードの塊のようです。

Answer 1

スタイルシートでより多くの CSS を使用し、インラインでは使用しません。次に、クラスを切り替えて、見栄えを良くすることができます...classy。もう 1 つ: イベント リスナーを 1 つだけバインドclickし、イベント ハンドラーで、メニューを開いたり閉じたりする必要があるかどうかを確認できます。

CSS

.userNavBar {
    background-color: #333;
}

.userNavBar.active {
    background-color: #444;
}

.upperBar {
    border-top-color: #333;
}

.upperBar.active {
    border-top-color: #ff556f;
}

JavaScript

$(function() {
  function toggleMenu(show) {
    $('.dropdownInfo').toggle(show);
    $('.userNavBar, .upperBar').toggleClass('active', show);
  };

  $('body').on('click', function(e) {
    var show = $(e.target).hasClass('userNavBar');
    if (show) e.preventDefault(); // not sure this is even necessary anymore
    toggleMenu(show);
  });
});

また、一重引用符と二重引用符を混在させないでください。1 つを選択し、一貫性を保ちます。

Answer 2

you can try toggle with duration