Question

我想要实现的目标非常简单，但出于某种原因，我无法让它发挥作用！我想要做的是当你点击其中一个特定类型的链接时，我希望显示相应的歌曲标题列表，最好是向下滑动。任何帮助，将不胜感激。到目前为止，这是我的HTML：

<p><a class="rock" href="">ROCK</a> / <a class="blues" href="">BLUES</a></p>

                    <section class="container">
                    <div class="leftcolumn">
                        <ul class="rock">
                            <li>AUTOHAZE</li>
                            <li>BASSHOLES</li>
                            <li>BEAT ANGELS</li>
                            <li>BONFIRE MADIGAN </li>
                            <li>BOOM</li>       
                        </ul>

                        <ul class="blues">
                            <li>20 MILES    </li>
                            <li>AARON MOORE </li>
                            <li>ALBERT AMMONS   </li>
                            <li>ARON BURTON </li>
                            <li>ARTHUR CRUDUP   </li>
                        </ul>
                    </div>
                    </section>

Answer 1

<p><a class="rock" href="#">ROCK</a> / <a class="blues" href="#">BLUES</a></p>

                    <section class="container">
                    <div class="leftcolumn">
                        <ul class="rock" >
                            <li>AUTOHAZE</li>
                            <li>BASSHOLES</li>
                            <li>BEAT ANGELS</li>
                            <li>BONFIRE MADIGAN </li>
                            <li>BOOM</li>       
                        </ul>

                        <ul class="blues">
                            <li>20 MILES    </li>
                            <li>AARON MOORE </li>
                            <li>ALBERT AMMONS   </li>
                            <li>ARON BURTON </li>
                            <li>ARTHUR CRUDUP   </li>
                        </ul>
                    </div>
                    </section>

添加以下css：

ul {

    display:none;

}

jquery：

$(function () {
    $('a').bind('click',function () {
        var Class = $(this).attr('class');

        var ulName = 'ul.' + Class;
        var Display=$(ulName).css('display');
        var Dis = $(ulName).css('display');

        $(ulName).siblings().hide();
        if (Dis == "block" || Dis == "undefined") {
            $(ulName).slideUp();
        }
        else {
            $(ulName).slideDown().show(1);
        }

    })
});

<强> DEMO IS HERE

Answer 2

HTML

<p><a class="toggleBtn" data-id="rock" href="#">ROCK</a> / <a class="toggleBtn"
    data-id="blues" href="#">BLUES</a>
</p>
<section class="container">
    <div class="leftcolumn">
        <ul id="rock" class="toggleContainer">
            <li>AUTOHAZE</li>
            <li>BASSHOLES</li>
            <li>BEAT ANGELS</li>
            <li>BONFIRE MADIGAN</li>
            <li>BOOM</li>
        </ul>
        <ul id="blues" class="toggleContainer">
            <li>20 MILES</li>
            <li>AARON MOORE</li>
            <li>ALBERT AMMONS</li>
            <li>ARON BURTON</li>
            <li>ARTHUR CRUDUP</li>
        </ul>
    </div>
</section>

CSS

.toggleContainer {display:none;}

JQUERY

$(function () {
    $(".toggleBtn").click(function () {
        $(".toggleContainer").hide();
        $("#" + $(this).attr("data-id")).slideDown();
    });
});

DEMO - JSFiddle

Answer 3

<p><a class="rock" href="#">ROCK</a> / <a class="blues" href="#">BLUES</a></p>

                    <section class="container">
                    <div class="leftcolumn">
                        <ul class="rock" >
                            <li>AUTOHAZE</li>
                            <li>BASSHOLES</li>
                            <li>BEAT ANGELS</li>
                            <li>BONFIRE MADIGAN </li>
                            <li>BOOM</li>       
                        </ul>

                        <ul class="blues">
                            <li>20 MILES    </li>
                            <li>AARON MOORE </li>
                            <li>ALBERT AMMONS   </li>
                            <li>ARON BURTON </li>
                            <li>ARTHUR CRUDUP   </li>
                        </ul>
                    </div>
                    </section>

jquery的：

$(function () {
    $('a').click(function () {
        var Class = $(this).attr('class');

        var ulName = 'ul.' + Class;
        $(ulName).hide();
        $(ulName).slideDown();
    });
});

我测试过它并且工作得很好。的 Demo is here

单击链接时使列表向下滑动

3 个答案: