不能選擇孩子

Question

我得到這個HTML：

   <ul> 
       <a href="#"><li>Test</li></a> 
       <a href="#"><li>Test2</li></a> 
       <a href="#" class="with-sub"><li>Test3</li> 
        <ul class="sub"> 
         <li><a href="#">Sub1</a></li> 
         <li><a href="#">Sub2</a></li> 
         <li><a href="#">Sub3</a></li> 
        </ul> 
       </a> 
      </ul> 

和jQuery：

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $(".sub").hide(); 
    }); 
    $(".with-sub").click(function() { 
     $(this).find(".sub").slideDown("slow", function() { 

     }); 
    }); 
</script> 

當我點擊該鏈接的「與子」級沒有任何反應。

Answer 1

您可以將HTML和jQuery更改爲以下幾點：

$(".with-sub").click(function() { 
 
    $(this).next("ul").slideDown(); 
 
});

.sub { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <a href="#"> 
 
    <li>Test</li> 
 
    </a> 
 
    <a href="#"> 
 
    <li>Test2</li> 
 
    </a> 
 
    <a href="#" class="with-sub"> 
 
    <li>Test3 
 
     <ul class="sub"> 
 
     <li><a href="#">Sub1</a> 
 

 
     </li> 
 
     <li><a href="#">Sub2</a> 
 

 
     </li> 
 
     <li><a href="#">Sub3</a> 
 

 
     </li> 
 
     </ul> 
 
    </li> 
 
    </a> 
 
</ul>

正如在評論中提到你的html是不正確的。 ul元素可以包含零個或多個元素，最終與ol和ul元素混合。

$(".with-sub").click(function() { 
 
    $(this).find("ul").toggle(); 
 
});

.sub { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#">Test</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Test2</a> 
 
    </li> 
 
    <li class="with-sub"><a href="#">Test3</a> 
 
    <ul class="sub"> 
 
     <li> 
 
     <a href="#">Sub1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Sub2</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Sub3</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

您當前的代碼不起作用，因爲您試圖將事件綁定到DOM中不存在的元素，您需要將click()處理程序放入DOMReady處理程序中。

另請注意，您的HTML無效 - 只有li元素可以是ul元素的直接後代。試試這個：

<ul> 
    <li> 
     <a href="#">Test</a> 
    </li> 
    <li> 
     <a href="#">Test2</a> 
    </li> 
    <li> 
     <a href="#" class="with-sub">Test3</a> 
     <ul class="sub"> 
      <li> 
       <a href="#">Sub1</a> 
      </li> 
      <li> 
       <a href="#">Sub2</a> 
      </li> 
      <li> 
       <a href="#">Sub3</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

一旦你定你的HTML，以下jQuery將工作：

$(document).ready(function() { 
    $(".sub").hide(); 
    $(".with-sub").click(function() { 
     $(this).siblings(".sub").slideDown("slow"); 
    }); 
}); 

Working example