Question

我正在创建一个显示专辑曲目列表的HTML页面。它应该允许用户单击下拉列表并查看特定轨道的歌词。我有一个jquery函数可以降低歌词... - 它降低了所有歌词而不仅仅是选定的曲目 - 您可以一起打开所有选项卡，当单击选项卡时，它应该关闭先前打开的选项卡

我目前的参考代码：

Jquery的：

$(document).ready(function()
{

        $(".lyrics").hide();
        $(".dropdownheader").show();

    $('.dropdownheader').click(function()
    {
        $(".lyrics").slideToggle();
    });

});

HTML：`

                <li> 
                    <p class="dropdownheader">Song 1 </p>
                    <p class="lyrics">
                        Sing Song 
                    </p>
                    <audio controls height="100" width="100">
                        <source src="a.mp3" type="audio/mpeg"></source>
                        <embed height="50" width="100" src="horse.mp3"></embed>
                    </audio>
                </li>

Answer 1

您应该使用this向下滑动点击的歌词：

$('.dropdownheader').click(function()
{
    $(".lyrics").slideUp(); <-- Hide any other lyrics that are showing
    $(this).next(".lyrics").slideDown(); <-- Slide down clicked lyrics.
});

演示：http://jsfiddle.net/tymeJV/earNm/

jQuery代码，用于从<ul> </ul>单独扩展/折叠div

1 个答案: