0

ul からのナビゲーションがあります。以下を参照してください。

<nav>
<ul>
    <li><a href="#">Top Link 1</a></li>
    <li><a href="#">Top Link 2</a></li>
         <ul>
           <li><a href="#" >Sub Link 1</a></li>
           <li><a href="#">Sub Link 2</a></li>
           <li><a href="#">Sub Link 3</a></li>
        </ul>
    </li>        
    <li><a href="#">Top Link 3</a></li>
        <ul>
           <li><a href="#" >Sub Link 1</a></li>
           <li><a href="#">Sub Link 2</a></li>
           <li><a href="#">Sub Link 3</a></li>
        </ul>
    </li>
</ul>
</nav>

親の「li」をホバリングしない限り、サブリンクの「ul」を非表示にするCSSがあります。（これは問題ではないため、尋ねられない限り表示されません）

JQuery を使用して、最上位の "li" に css スタイル (margin-bottom:30px;) を追加しようとしていますが、その中に子 "ul" がネストされている場合に限ります。私のJQueryは以下の通りです：

<script>
$(document).ajaxSuccess(function () {

    if ($("nav ul >li").children("ul li")) {
        $("nav ul >li").hover(function () {
            $("nav ul >li").css("margin-bottom", "30");
        });

    }
});
</script>

これは私にとってはうまくいかないようです。誰かが私が間違っていることを指摘できますか? それとも、このアプローチに対してより良い解決策を提供できますか?

4

4 に答える 4

0

.children()メソッドはオブジェクトを返し、オブジェクトは JavaScript の真の値です。条件が true と評価された場合は別として、子liを持つ要素だけでなくすべての要素にリスナーを追加しています。フィルタリング メソッドであるメソッドをul使用できます。 .has():

$("nav > ul > li").has('ul').on({
    mouseenter: function() {
      $(this).css("margin-bottom", "30px");
    },
    mouseleave: function() {
      $(this).css("margin-bottom", "n");
    }
});

または：

li.hovered {
  margin-bottom: 30px;
}

$("nav > ul > li").has('ul').on('mouseenter mouseleave', function(e){
    $(this).toggleClass('hovered', e.type === 'mouseenter');
});
于 2013-09-23T16:05:48.600 に答える
0

質問に余分なものがあり</li>ますが、これはタイプミスだと思います..

<li><a href="#">Top Link 2</a></li>
                     //-------^^^^^here
     <ul>
       <li><a href="#" >Sub Link 1</a></li>

とにかく、存在する場合は子の長さを確認してください..

これを試して

$(document).ajaxSuccess(function () {
if ($("nav ul >li").children().length > 0) {
    $("nav ul >li").hover(function () {
        $(this).css("margin-bottom", "30");
    });

}
});
于 2013-09-23T16:06:30.120 に答える