0

残念ながら、ドロップダウンが消えるという問題があります。私は現在、クリック時にクラスを追加/削除するためにtoggleClassを使用していますが、メニューがぼやけている場合、つまりページ上の他の場所をクリックするなど、このプロセスを元に戻す必要もあります。これが私のjqueryコードです:

$(function() {$('#srt-btn').click(function() {$('ul.toggle-off').toggleClass('toggle-on')});});

<ul id="sort">
<li><a id="srt-btn" class="srt-title">Sort ▾&lt;/a>
        <ul class="sort-menu toggle-off">
            <div class="droid"></div>
            <li class="top"><a href="#">Notes</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Videos</a></li>
            <li class="divider"></li>
            <li class="btm"><a href="#">Make List</a></li>
    </ul>
    </li>

4

3 に答える 3

1

stopPropagation を使用してクリック イベントをキャンセルすることもできます

$(function() {
    $('#srt-btn').click(
        function(e) {
            $('ul.sort-menu').slideToggle();
            e.stopPropagation();
        }
    );
    $('.sort-menu li').click(
        function(e) {
            $('ul.sort-menu').slideUp();
            e.stopPropagation();
        }
    );
    $(document).click(
        function(){
            $('ul.sort-menu').slideUp();
        }
    );

});

また、メニューオプション ul を position:absolute に設定することを忘れないでください。そうしないと、要素がシフトします

ここにjsFiddleがあります

于 2012-09-11T21:08:10.747 に答える
1 
function toggleMenu() 
{   
     $('ul.toggle-off').toggleClass('toggle-on');
}


$(function() {
     $('#srt-btn').click(toggleMenu);
     $('#srt-btn').blur(toggleMenu);
});

作業例。

于 2012-09-11T20:37:35.920 に答える
0

次のようなことを試すことができます：

var IsInside = false,
    $sortMenu = $('#sort'),
    $toggleOn = $('.toggle-off');

$sortMenu.on('mouseenter', '#srt-btn', function(){
  IsInside = true;
}).on('mouseleave', '#srt-btn', function(){
  IsInside = false;
});

$sortMenu.on('click', '#srt-btn', function(){
  $toggleOn.toggleClass('toggle-on');
});

$(document).on('click', 'body', function(){
  if(!IsInside) {
    $toggleOn.removeClass('toggle-on');
  }
});

ここではjsFiddleです。

于 2012-09-11T21:05:36.643 に答える