2

私が達成したいことはかなり簡単ですが、何らかの理由でそれを機能させることができません！私がやりたいのは、特定のジャンルへのリンクの1つをクリックしたときに、対応する曲のタイトルのリストを表示することです。できれば下にスライドします。どんな助けでもいただければ幸いです。これまでの私の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

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

デモ-JSFiddle

于 2013-02-11T17:44:58.557 に答える
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 に答える