-2

我有一个单字链接列表，想在点击时折叠各个段落。有人可以帮我理解为什么这段代码不起作用吗？

<script>
    $(document).ready(function(){
        $("#origins").click(function(){
            $("li").each(function(){
                $("#"+$(this).text()+"Content").animate({height:'0', opacity:'0'}, 500);
            });
        });
    });
</script>

编辑： 添加了相关的 HTML

<body>
    <h1 class='title'>Electronic Music: London</h1>
    <ul>
        <li><a id='Origins'  href="#">Origins</a></li>
        <li><a id='Arrival'  href="#">Arrival</a></li>
        <li><a id='Clubs'    href="#">Clubs</a></li>
        <li><a id='Labels'   href="#">Labels</a></li>
        <li><a id='Examples' href="#">Examples</a></li>
        <li><a id='Credits' href="#">Credits</a></li>
    </ul>

    <p id='welcome' style='text-align:center;'>
        <br>
        Welcome!  Please click on any of the topics above to learn more.
    </p>

    <p id='originsContent'>
        Lorem ipsum dolor sit amet....
    </p>
</body>
4

2 回答 2

1

试试这个代码：

$(document).ready(function(){
    $('li').click(function(){
        $("#"+$(this).text().toLowerCase()+"Content").animate({height:'0', opacity:'0'}, 500);
    });
});

例如，我添加了 toLowerCase() 方法进行转换，Origins并origins稍微更改了代码的结构。

于 2013-07-20T14:36:58.770 回答
1

这也会让他们回来。而不是仅仅隐藏它们。您也可以用常规动画替换 slideUp 动画。

$(document).ready(function(){
    $("li").click(function(){
         var text = $(this).find('a').text().toLowerCase();
         var para = $('#'+ text +'Content');
         if(para.is(':visible')){
             para.slideUp(500);
         }else{
             para.slideDown(500);
         }
    });
});
于 2013-07-20T14:44:41.277 回答