Question

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

<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>

Answer 1

试试这段代码：

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

我添加了toLowerCase（）方法，例如，Origins转换为origins，我稍微更改了代码的结构。

Answer 2

这也将带回来。而不是只是隐藏它们。您也可以使用常规动画替换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);
         }
    });
});

使用<li>和html id与.each </li>

2 个答案: