1

ユーザーが$('#menu');ボタンを切り替えると、問題はありません。ただし、ユーザーがマウスを離して$('#dropdown');からクリックして戻す$('#menu');と、トグルが再び機能するために 2 回クリックする必要があります。私は何か間違ったことをしていますか？

jsfiddle デモ

===========HTML===========

<a class="" href="javascript:;" id="menu"></a>
<div style="display: none;" id="dropdown">
  <div id="wrap">
    <div class="menu-section">
      <div class="menu-header-section">
        <h3>Header</h3>
      </div>
      <div class="menu-list">
        <ul class="list">
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </div>
    </div>
  </div>
  <a href="javascript:;" class="closeThis">close</a> </div>
</div>

===========jQuery===========

    //menu
var menu = $('#menu');
var dropdown = $('#dropdown');

menu.toggle(function () {
    menu.addClass('active');
    dropdown.fadeIn();
}, function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return false;
});
dropdown.mouseleave(function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return menu;
});
4

3 に答える 3

3

ドキュメントはそれをすべて説明しています：

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] ) handler(eventObject)要素がクリックされるたびに実行する関数。 handler(eventObject)要素が奇数回クリックされるたびに実行する関数。

.toggle() メソッドはクリック イベントのハンドラーをバインドするため、クリックのトリガーについて説明したルールがここにも適用されます。

つまり、偶数イベントtoggle()と奇数イベントに基づいて交互に実行されclickます。そう：

  • [奇数] をクリック: 表示

  • [偶数] をクリック: 非表示

  • クリック 1: 表示

  • クリック 1: 表示
  • クリック 2: 非表示
  • クリック 3: 表示
  • クリック 4: 非表示
  • クリック 5: 表示
  • mouseleave: 非表示
  • click 6: Hide //#dropdownすでにここに隠されていることに注意してください。一度クリックすると、再び非表示になります。
  • click 7: Show // 2 回クリックして表示します。

とにかく、それはあなたの問題の説明です。解決に取り組んでいます。

解決

イベントを手動でトリガーしclickます。

交換：

dropdown.mouseleave(function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return menu;
});

と：

dropdown.mouseleave(function () {
    menu.trigger('click');
});

デモ: http://jsfiddle.net/aymansafadi/BF8p6/2/

于 2012-05-18T12:54:00.737 に答える
1

論理的には、

最初にをクリックするmenuと、 がdropdown表示されます。あなたmouseleaveはdropdown（消えます）。

menu これで、 を2 回クリックすると、関数の「後半」.toggle()(つまり).fadeOut()が実行されdropdownます。

この後、もう一度 をクリックするmenuと、 の「前半」が実行され、.toggle()すべてが楽しそうです。

編集

の概念を試すことができますflag。

var menu = $('#menu');
var dropdown = $('#dropdown');
var flag = 'reset';

menu.click(function () {
    if(flag == 'reset')
    {
        menu.addClass('active');
        dropdown.fadeIn();
        flag = 'set';
    }
    else if(flag =='set')
    {
        flag = 'reset'; 
        menu.removeClass('active');
        dropdown.fadeOut();                               
        return false;
    }
});

dropdown.mouseleave(function () {
    flag = 'reset';
    menu.removeClass('active');
    dropdown.fadeOut();
    return menu;
});

jsFiddle: http://jsfiddle.net/BF8p6/1/

于 2012-05-18T12:38:19.640 に答える
0

これがうまくいくことを願っています。

$('#menu').click(
function () {

if ($("#dropdown:visible"))
{
$('.mapNavLeft').removeClass("active");
$(this).next('#dropdown')fadeOut();
} else {
$(this).addClass("active");
$(this).next('#dropdown')fadeIn();
}

});

$("#dropdown").hover(
function () {
  return false;
},
function () {
  $(this).fadeOut();
}
);
于 2012-05-18T12:57:25.197 に答える