0

htmlコード

<ul class="menu">
<li>deneme</li>
<li>deneme
    <ul>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
    </ul>
</li>
<li>deneme
    <ul>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
    </ul>
</li>
<li>deneme</li>
<li>deneme</li>
<li>deneme
    <ul>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
    </ul>
</li>
<li>deneme</li>
</ul>​

javascript：

$(document).ready(function(){
    $("ul.menu > li").css("color","red");
    $("li ul li").css("color","blue")
    $("li ul li").hide();
    $("ul.menu li").hover(
        function() {
            $("li ul li").show();
        },
        function() {
            $("li ul li").hide();
        }
    );
});​

そして私の質問ですが、ホバーイベントで現在のサブメニュー項目を表示したいと思います。ただし、このコードはすべてのサブメニューを表示します。どうすれば修正できますか？

ありがとう。

4

4 に答える 4

1

ホバーハンドラーで要素を選択するためのコンテキストを提供します。

これを試して：

$(document).ready(function() {

    $("ul.menu > li").css("color", "red");
    $("li ul li").css("color", "blue")
    $("li ul li").hide();
    $("ul.menu li").hover(

    function() {
        $("ul li", this).show();
    }, function() {
        $("ul li", this).hide();
    }

    );

});​

実例： http： //jsfiddle.net/eygsY/22/

于 2012-07-06T22:22:11.183 に答える
1

http://jsfiddle.net/eygsY/24/

セレクターのコンテキストを提供します（thisドキュメント全体ではなく、以下でのみ検索します）。

function() {
    $("ul li", this).show();
}, function() {
    $("ul li", this).hide();
}
于 2012-07-06T22:22:15.343 に答える
1

thisユーザーがホバーしているホバーを取得し、その中のLIを見つけてli表示する必要があります。次のように（jsFiddle）：

$(document).ready(function(){

  $("ul.menu > li").css("color","red");
  $("li ul li").css("color","blue")
  $("li ul li").hide();
  $("ul.menu li").hover(
    function() {
        $(this).find("li").show();
    },
    function() {
        $(this).find("li").hide();
    }
  );
});​
于 2012-07-06T22:22:16.320 に答える
1

ここにあなたを助けることができるものがあります

 $(document).ready(function(){

$("ul.menu > li").css("color","red");
 $("li ul li").css("color","blue")
$("li ul li").hide();
$("ul.menu li").hover(
    function() {
    $(this).find("li").slideDown('slow');
    },
    function() {
    $(this).find("li").slideUp('slow');
    }

);

});​
于 2012-07-06T22:28:29.180 に答える