1

私は現在、JqueryのAPIを学んでいます。以下に示すように、Jqueryにはホバー機能があることを理解しています。

hover( handlerIn(eventObject) , handlerOut(eventObject))

2 番目handlerOut(eventObject)の では、ホバーされていないときにメニュー ツリーを折りたたむなどのイベントを処理できます。

次に、以下に示すように、クリック機能の API を調べました。

.click( [eventData], handler(eventObject) )

前の説明で達成したいことと同様に、メニュー ツリーがあります。リスト項目をクリックすると、サブメニューにドロップダウンします。私の質問は、メニューをクリックしたとき、または他の項目をクリックしたときに、このサブメニュー ツリーを折りたたむにはどうすればよいですか?

最後に、これを実現するために jquery-1.2.6.min.js を使用しています。

私のjQuery：

 $("li.p1:has(ul)").click(function(event){
    if (this == event.target) {
    var current = this;
    $("#nav li:has(ul)").each(function() {
        if (this != current) $(this).children().slideUp(400);
    });
        $("ul:first", $(this)).slideToggle(400);
    }
    },function(){$(this).children().slideUp(400);});

私のHTML：

    <div id="wrap">
    <ul id="nav">
    <li class="p1 down">Manage Subject
        <ul>
            <li><a href="#url">Add Subject</a></li>
            <li><a href="#url">Edit Subject</a></li>
            <li><a href="#url">Delete Subject</a></li>
            <li><a href="#url">Export Subject</a></li>
        </ul>
    </li>
    <li><a href="#url">Manual Crawling</a></li>
    <li><a href="#url">Crawl Interval</a></li>
    <li><a href="#url">Search Parameter</a></li>
    </ul>
    </div>
4

2 に答える 2

2

私が考えることができる 1 つの方法は、'body' 要素のイベント ハンドラーを作成することです。

$('body').click(function(event){
   //Needs validation.
   if ($('li.p1:has(ul)') != event.target) {
        $("#nav li:has(ul)").each(function() {
            if (this != current) $(this).children().slideUp(400);
        });
    }
});

目的は、「body」要素にイベント ハンドラーを追加し、目的の要素がクリックされたかどうかを確認することです。そうでない場合は、上にスライドします。同じことをより良い方法で行うことができると思います。

于 2012-09-24T10:05:20.987 に答える
1

次のコードは、div がクリックされたときに、divの色を赤に設定します。他の場所をクリックすると、 div の色が再び黒に戻ります。"target"
"target"

"target"div が黒い状態(開いていない) のときに divの外側をクリックしても、何も起こりません。そのため、既に閉じているメニューを閉じ
ません。

var counter = 0;
$( "html" ).live('click', function(event){    
    var myID = event.target.id;
    if (myID && myID == "target") {
        $('#'+myID).css('color', 'red');
        counter++;
    }
    else { 
         if(counter > 0){ 
             $("#target").css('color', 'black');
         }
         counter = 0;
     }
});

編集: http: //jsfiddle.net/PQunY/を追加して遊んでください...

于 2012-09-24T10:59:22.380 に答える