javascript - Can't select a child -
i got 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>
and 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>
when click on link "with-sub" class nothing happens.
you can change html , jquery following:
$(".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>
as mention in comments html not correct. ul
elements can contain 0 or more li
elements, mixed ol
, ul
elements.
$(".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>
Comments
Post a Comment