javascript - 嵌套列表 css 问题

Question

我在下面嵌套列表时遇到问题。嵌套列表未出现在页面上。我认为它与我的 JS 隐藏它有关。任何人都可以看到可能是什么问题 - 这让我发疯!

<ul class="question">  
     <li><a href="#">QUESTION goes here</a>
      <ul>
      <li><a href="#">ANSWER goes here></a>
      </li>
      </ul>
   </li>
   <li><a href="#">QUESTION 2 goes here</a>
      <ul>
      <li><a href="#">ANSWER 2 goes here>
         <li>
         <ul>
            <li>nested list item 1</li>
            <li>nested list item 2</li>
            <li>nested list item 3</li>
         </ul>
         </li></a>
      </li>
      </ul>
   </li>
</ul>

我的JS:

<script>
$(document).ready(function () {
$('#question > li > a').click(function(){

if (!$(this).hasClass('active')){
$('#question li ul').slideUp();
$(this).next().slideToggle();
$('#question li a').removeClass('active');
$(this).addClass('active');
}
else{
$('#question li ul').slideUp();
$('#question li a').removeClass('active');
}
});
});
</script>

Answer 1

这里: http://jsfiddle.net/eAJjs/

$('#question > li > a').click(function () {

    if (!$(this).hasClass('active')) {
        $('#question>li>ul').slideUp();
        $(this).next().slideToggle();
        $('#question>li>a').removeClass('active');
        $(this).addClass('active');
    } else {
        $('#question>li>ul').slideUp();
        $('#question>li>a').removeClass('active');
    }
});


<ul id="question">
    <li><a href="#">QUESTION goes here</a>

        <ul>
            <li><a href="#">ANSWER goes here></a>

            </li>
        </ul>
    </li>
    <li><a href="#">QUESTION 2 goes here</a>

        <ul>
            <li><a href="#">ANSWER 2 goes here>
         <li>
             <ul>
                <li>nested list item 1</li>
                <li>nested list item 2</li>
                <li>nested list item 3</li>
             </ul>
         </li></a>

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