JQuery next（）とfind（）を使用して、ホールドされたdivの次の最も近いクラス指定の要素を見つけて表示します。

Question

マウスのホバーとマウスの離しで次のサブナビゲーション要素を表示/非表示しようとしていますが、 （）次のために右の構文を（）を取得し、見つけることができません...私が試してみました：

$(this).next('.sub-nav').show(); 

$(this).next('div').find('.sub-nav').show(); 

どちらが働いている、私はちょうど間違った構文を使用していますかなり確信しています。私が紛失しているものがあるか、またはJqueryが前の 'has-children' divの次の 'sub-nav'を見つけるために入れなければならない別の警告がありますか？

$('.has-children').hover(
 
    function() { 
 
    $(this).css({ 
 
     'border-bottom-right-radius': '0', 
 
     'border-bottom-left-radius': '0' 
 
    }); 
 
    $('.bottom-nav .sub-nav li:last-child').css({ 
 
     'border-bottom-right-radius': '10px', 
 
     'border-bottom-left-radius': '10px' 
 
    }); 
 

 
    $('.sub-nav').show(); 
 
    }, 
 
    function() { 
 
    $(this).css({ 
 
     'border-bottom-right-radius': '10px', 
 
     'border-bottom-left-radius': '10px' 
 
    }); 
 
    $('.sub-nav').hide(); 
 
    });

.bottom-nav { 
 
    position: relative; 
 
    z-index: 2; 
 
    max-width: 912px; 
 
    width: 100%; 
 
    margin-top: 22px; 
 
} 
 

 
.bottom-nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.bottom-nav ul li { 
 
    display: inline-block; 
 
    background-color: #4ea45a; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    height: 45px; 
 
    width: 225px; 
 
    font-size: 16px; 
 
    vertical-align: top; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 18px; 
 
    cursor: pointer; 
 
} 
 

 
.bottom-nav ul li a { 
 
    color: #fff; 
 
} 
 

 
.bottom-nav .sub-nav { 
 
    display: none; 
 
    margin-top: 15px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    width: 225px; 
 
} 
 

 
.bottom-nav .sub-nav li { 
 
    display: block; 
 
    height: 45px; 
 
    line-height: 15px; 
 
    background-color: #4ea45a; 
 
    border-bottom-left-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    font-size: 16px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: center; 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 

 
.bottom-nav .sub-nav li img { 
 
    vertical-align: top; 
 
} 
 

 
.bottom-nav .sub-nav li a { 
 
    color: #fff; 
 
} 
 

 
.bottom-nav .sub-nav li a:hover, 
 
.bottom-nav .sub-nav li a:active, 
 
.bottom-nav ul li a:hover, 
 
.bottom-nav ul li a:active { 
 
    text-decoration: none; 
 
    color: #ebd3af; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="bottom-nav"> 
 
    <ul> 
 
    <li class="has-children" style="padding-top:12px;"> 
 
     <a href="about">MENU 1</a> 
 
     <ul class="sub-nav"> 
 
     <li> 
 
      <a href="SUB">SUB 1</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="has-children" style="padding-top:3px;"> 
 
     <a href="#">MENU 2</a> 
 
     <ul class="sub-nav"> 
 
     <li> 
 
      <a href="#">SUB2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

div要素であるか、そう両方が失敗するクラス.sub-nav'を持って何next（即時以下兄弟）はありません。しかし、の子がありますので、findが動作します。この場合、.sub-navは.has-childrenの子であるため、.children()も機能します。

$('.has-children').hover(
 
    function() { 
 
    $(this).css({ 
 
     'border-bottom-right-radius': '0', 
 
     'border-bottom-left-radius': '0' 
 
     }) 
 
     .find('.sub-nav').show(); 
 

 
    $('.bottom-nav .sub-nav li:last-child').css({ 
 
     'border-bottom-right-radius': '10px', 
 
     'border-bottom-left-radius': '10px' 
 
    }); 
 
    }, 
 
    function() { 
 
    $(this).css({ 
 
     'border-bottom-right-radius': '10px', 
 
     'border-bottom-left-radius': '10px' 
 
     }) 
 
     .find('.sub-nav').hide(); 
 
    });

.bottom-nav { 
 
    position: relative; 
 
    z-index: 2; 
 
    max-width: 912px; 
 
    width: 100%; 
 
    margin-top: 22px; 
 
} 
 

 
.bottom-nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.bottom-nav ul li { 
 
    display: inline-block; 
 
    background-color: #4ea45a; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    height: 45px; 
 
    width: 225px; 
 
    font-size: 16px; 
 
    vertical-align: top; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 18px; 
 
    cursor: pointer; 
 
} 
 

 
.bottom-nav ul li a { 
 
    color: #fff; 
 
} 
 

 
.bottom-nav .sub-nav { 
 
    display: none; 
 
    margin-top: 15px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    width: 225px; 
 
} 
 

 
.bottom-nav .sub-nav li { 
 
    display: block; 
 
    height: 45px; 
 
    line-height: 15px; 
 
    background-color: #4ea45a; 
 
    border-bottom-left-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    font-size: 16px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: center; 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 

 
.bottom-nav .sub-nav li img { 
 
    vertical-align: top; 
 
} 
 

 
.bottom-nav .sub-nav li a { 
 
    color: #fff; 
 
} 
 

 
.bottom-nav .sub-nav li a:hover, 
 
.bottom-nav .sub-nav li a:active, 
 
.bottom-nav ul li a:hover, 
 
.bottom-nav ul li a:active { 
 
    text-decoration: none; 
 
    color: #ebd3af; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="bottom-nav"> 
 
    <ul> 
 
    <li class="has-children" style="padding-top:12px;"> 
 
     <a href="about">MENU 1</a> 
 
     <ul class="sub-nav"> 
 
     <li> 
 
      <a href="SUB">SUB 1</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="has-children" style="padding-top:3px;"> 
 
     <a href="#">MENU 2</a> 
 
     <ul class="sub-nav"> 
 
     <li> 
 
      <a href="#">SUB2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>