如何在jquery中單擊當前li時獲取下一個ul元素

Question

我的側欄中有一些ul和li元素。我需要slideDown()下ul 當前li項目。我嘗試了一些，但沒有運氣。任何人都可以請幫我在這個好嗎？這裏是我的嘗試下面：

我的HTML代碼：

<li class="parent-li">Reports 
    <i class="fa fa-cloud" style="font-size:10px;color:red;"></i> 
    <ul> 
     <li>Report1</li> 
     <li>Report2</li> 
     <li>Report3</li> 
    </ul> 
</li> 

我的JavaScript代碼：

$('parent-li').on("click", function(){ 
    $(this).next('ul').slideDown(); 
}); 

Answer 1

自。 next（）查找元素的同胞元素，並且目標ul元素是子元素，您應該使用選擇ul元素。 children（）或。 find（）。

請更正您的li元素選擇器，因爲類選擇器以點開始。這是一個例子。

$('.parent-li').on("click", function() { 
 
    $(this).children('ul').slideDown(); 
 
});

.hide 
 
{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="parent-li">Reports 
 
    <i class="fa fa-cloud" style="font-size:10px;color:red;"></i> 
 
    <ul class="hide"> 
 
    <li>Report1</li> 
 
    <li>Report2</li> 
 
    <li>Report3</li> 
 
    </ul> 
 
</li>

Answer 2

嘗試使用.find()，像這樣：

$('parent-li').on('click', function(){ 
    $(this).find('ul').slideDown(); 
}); 

Answer 3

的UL你」重試下滑實際上嵌套在LI中，因此你的代碼在你的LI中找不到UL。你也需要一個點添加到您的CSS選擇器找到李與類的「父利」

你可以試試下面代替：

$('.parent-li').on("click", function(){ 
    // the .first() is optional but it'll find the first UL inside the LI 
    $(this).find('ul').first().slideDown(); 
});