2

我想要实现的目标非常简单，但由于某种原因我无法让它工作！我想要做的是，当您单击指向特定流派的链接之一时，我希望显示相应的歌曲标题列表，最好向下滑动。任何帮助，将不胜感激。到目前为止，这是我的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>
4

3 回答 3

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);
        }

    })
});

演示在这里

于 2013-02-11T19:36:31.103 回答
0 
<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();
    });
});

我已经测试过它并且工作得很好。演示在这里

于 2013-02-11T17:55:46.747 回答
0

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

查询

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

演示 - JSFiddle

于 2013-02-11T17:44:58.557 回答