1

ドロップボックスダッシュボードと非常によく似たドロップダウンを作成しようとしています。ユーザー名をクリックすると、フライアウトメニューが表示されます。ユーザー名をもう一度クリックすると、フライアウトが閉じます（クリックするたびに切り替えます）。

注意点の1つは、フライアウト自体以外の場所をクリックすると、フライアウトも閉じることです。

これまでのところ、ほぼ機能していますが、100％ではありません。実際の「body」要素を直接クリックすると、フライアウトが閉じます。これは、私のWebサイトに.wrapper要素があり、ページの高さ全体を占めていないことを意味します。下部に薄いストリップがあり、実際の要素はそれを覆っていません<body>。タグのみです。.wrapperまたは他の要素がスペースを占める場所（100％幅の非表示ラッパーでも）、要素がある場所（本体以外）をクリックしてもウィンドウは閉じません。

javascript：

// FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$(document).on('click',function(e) { 
    if ( $(e.target).parents($flyout).length === 0 ) { 
        $flyout.fadeOut(flyoutDuration); 
    }
});

HTML

<body>
    <div class="blackbar">
        <div class="container clearfix">
            <a href="/"><div class="icon logo"></div></a>
            <div class="flyout">
                <h3>
                    Welcome back, <a href="#">username</a>
                </h3>
                <div class="menu">
                    <ul>
                        <li><a href="#"><div class="users"></div>Users</a></li>
                        <li><a href="#"><div class="groups"></div>Groups</a></li>
                        <li><a href="#"><div class="configuration"></div>Configuration</a></li>
                        <li><a href="#"><div class="logout"></div>Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <! -- content here -->
    </div>
</body>

予想される動作は、クリックした要素で、.flyoutの子孫ではなく、ウィンドウを閉じる必要があります（.blackbar、ロゴなどを含む）

4

2 に答える 2

2

正直に言うと、このようなことをしていて、「ボックス」内のクリックで要素を閉じたくない場合は、クリックがバブリングしないようにします。

// FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$('.flyout').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
});

$(document).on('click',function(e) { 
  if(flyout-open) {
        $flyout.fadeOut(flyoutDuration); 
    }
});
于 2012-11-05T19:56:40.510 に答える
0

Jqueryメニュークリック-本体の任意の場所をクリックするとメニューが閉じます

私の場合、プライマリリンクをクリックした場合、またはリンクの外側、つまりhtml / bodyのどこかにある場合は、ドロップダウンメニューを閉じたいと思いました。

http://jsfiddle.net/austinnoronha/k2Lwj/

var toggleClick = function(){

    var divObj = $(this).next();
    var nstyle = divObj.css("display");

    if(nstyle == "none"){
        divObj.slideDown(false,function(){
            $("html").bind("click",function(){
                divObj.slideUp();
                $("html").unbind("click");
            });
        });
    }
};

$(".clickme").click(toggleClick);
于 2014-03-03T09:00:20.867 に答える