2

これまでのところ、次のコードがあります。

<div id="wrapper">
<div id="user_info">
<p>Signed in as <span>max</span></p>
<ul>
<li><a href="#">Help</a></li>
<li id="siteSelector"><a href="#" class="">Switch to&#9660;</a>
<ul>
 <li><a href="JavaScript:void(0);">Item 1</a></li>
<li><a href="JavaScript:void(0);">Item 2</a></li>
<li><a href="JavaScript:void(0);">Item 3</a></li>
<li><a href="JavaScript:void(0);">Item 4</a></li>
</ul>
</li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
</div>

CSS

#wrapper {
width: 1200px;
}
#user_info {
margin: 0 auto;
text-align: right;
width: 250px;
}
#user_info p {
color: #333333;
margin-bottom: 0;
margin-right: 1.6em;
}
#user_info ul {
margin-top: 5px;
}
#user_info ul li {
float: left;
list-style-type: none;
padding: 5px 3px;
}
#user_info a {
color: #0B594A;
}
#siteSelector {
position: relative;
}
#siteSelector > a {
padding: 0 10px;
}
#siteSelector ul {
display: none;
}
#siteSelector ul li {
text-align: left;
width: 95%;
}
.siteSelect_anchor {
background: none repeat scroll 0 0 #0B594A;
border-radius: 6px 6px 0 0;
color: #FFFFFF !important;
display: block;
margin-top: -5px;
padding-top: 5px !important;
text-decoration: none;
}
.siteSelect_ul {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #0B594A;
border-radius: 6px 6px 6px 6px;
border-style: solid;
border-width: 5px;
box-shadow: 0 5px 20px #666666;
display: block !important;
height: auto;
left: 0;
padding-bottom: 15px;
position: absolute;
top: 20px;
width: 59px;
z-index: 250;
}
.siteSelect_ul a {
margin-left: -30px;
}

そしてJS：

 function clickNav() {
        $("#siteSelector").click(function() {
            $("a:first", this).toggleClass('siteSelect_anchor');
            $("ul:first", this).toggleClass('siteSelect_ul');
            $(".siteSelect_ul li").click(function(e) {
                var liTxt = $(this, ">a").text();
                $("#siteSelector > a").text(liTxt);
                     e.stopPropagation();
               });
                $(document).click(function() {
                     $("a:first", this).removeClass('siteSelect_anchor');
                     $("ul:first",this).removeClass('siteSelect_ul');
                });
            });
        }

ドロップダウンは問題なくクリックすると開きますが、もう一度クリックした場合にのみ閉じます#siteSelector。誰かがページのどこかをクリックした場合に閉じる必要があるので、使用しました$(document).click(function)が、機能せず、理由がわかりません。何か案は？

4

4 に答える 4

4

たぶん、ドキュメントのクリックハンドラーを次のように変更します。

$(document).click(function(event) {
    if (! $(event.target).parents().andSelf().is("#siteSelector")) {
        $("a:first", this).removeClass('siteSelect_anchor');
        $("ul:first",this).removeClass('siteSelect_ul');
    }
});

また、#siteSelector要素のクリックハンドラーの外に移動します。#siteSelectorクリックハンドラー内でリストアイテムとドキュメントのハンドラーをバインドしているようです。これは問題を引き起こします。要素をクリックするたび#siteSelectorに、クリックハンドラーの新しいコピーを他のものにバインドします。これにより、クリックハンドラーが複数回実行され、あらゆる種類の奇妙な望ましくない動作が発生する可能性があります。

于 2012-10-04T00:28:20.183 に答える
1

$(document).click すべてのイベントコールバックの外側に移動する必要があります。それ以外の場合は、$（ "＃siteSelector"）をクリックするたびにバインドされます。クリックイベントはまだドキュメントにバインドされていないため、最初のクリックでは機能しません。

変更されたコード：jsfiddle

    function clickNav( ) {
    $("#siteSelector").click(function( ) {
        $("a:first", this).toggleClass('siteSelect_anchor');
        $("ul:first", this).toggleClass('siteSelect_ul');        
        return false;
    });
    console.log($("#siteSelector li").length);
    $("#siteSelector li").click(function( e ) {
            var liTxt = $("a", this).text();
        console.log(liTxt, $("#siteSelector > a").length);
            $("#siteSelector > a").text(liTxt);
            e.stopPropagation();
            return false;
        });
    $(document).click(function( ) {
         console.log("a");
        $("a:first", $("#siteSelector")).removeClass('siteSelect_anchor');
        $("ul:first", $("#siteSelector")).removeClass('siteSelect_ul');
    });
}
于 2012-10-04T00:29:46.600 に答える
1

これは、あなたの望むことですか？

http://jsfiddle.net/VVS3T/11/

JS

function clickNav() {
    $("#siteSelector").click(function() {
        $("a:first", this).toggleClass('siteSelect_anchor');
        $("ul:first", this).toggleClass('siteSelect_ul');
    });
    $(".item").click(function() {
       $("#siteSelector > a").text($(this).text());
   });
}
$(clickNav);
$(document).bind("click", function(e) {
    if(e.target.id != "siteSelectorAnchor" && !$(e.target).hasClass('item')) {
       $("#siteSelector a:first").removeClass('siteSelect_anchor');
       $("#siteSelector ul:first").removeClass('siteSelect_ul');
    }
});
​

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

    </head>

<body>
  <div id="wrapper">
    <div id="user_info">
       <p>Signed in as <span>max</span></p>
        <ul>
          <li><a href="#">Help</a></li>
            <li id="siteSelector">
                <a id="siteSelectorAnchor" href="#" class="">Switch to&#9660;</a>
                <ul>
                    <li><a class="item" href="JavaScript:void(0);">Item 1</a></li>  
                    <li><a class="item" href="JavaScript:void(0);">Item 2</a></li>
                    <li><a class="item" href="JavaScript:void(0);">Item 3</a></li>
                    <li><a class="item" href="JavaScript:void(0);">Item 4</a></li>
                </ul>
            </li>
            <li><a href="/c/portal/logout">Sign Out</a></li>
        </ul>
    </div>

    <footer>

    </footer>
    </div>
    </body>
</html>
​
于 2012-10-04T18:53:08.050 に答える
0

私は$("body").mouseup()過去に使用しました：

var visible = false;

$("#siteSelector").click(function() {
    // your code from above, plus:
    visible = true;
}

$("body").mouseup(function(){ 
    if (visible) {
        $("a:first", this).removeClass('siteSelect_anchor');
        $("ul:first",this).removeClass('siteSelect_ul');
        visible = false;
    }
});
于 2012-10-04T00:30:43.550 に答える