0

私はJqueryの経験があまりないので、基本的な質問を許してください。私はこの単純な jquery アコーディオンを使用しています http://www.switchroyale.com/vallenato/

jqueryまたはcssを変更して、水平ではなく垂直にすることは可能ですか? この問題に関するドキュメントはあまりないようです。どんな助けでも大歓迎です。

これはジャバスクリプトです

$(document).ready(function()
{
    //Add Inactive Class To All Accordion Headers
    $('.accordion-header').toggleClass('inactive-header');

    //Set The Accordion Content Width
    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({'width' : contentwidth });

    //Open The First Accordion Section When Page Loads
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
    $('.accordion-content').first().slideDown().toggleClass('open-content');

    // The Accordion Effect
    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

    return false;
});

これがこのCSSです

#accordion-container {
    font-size: 13px;
    background: #ffffff;
    padding: 5px 10px 10px 10px;
    border: 1px solid #cccccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 5px 15px #cccccc;
    -webkit-box-shadow: 0 5px 15px #cccccc;
    box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
    font-size: 16px;
    background: #ebebeb;
    margin: 5px 0 0 0;
    padding: 5px 20px;
    border: 1px solid #cccccc;
    cursor: pointer;
    color: #666666;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.active-header {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    background: url(images/active-header.gif) #cef98d;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.active-header:hover {
    background: url(images/active-header.gif) #c6f089;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.inactive-header {
    background: url(images/inactive-header.gif) #ebebeb;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.inactive-header:hover {
    background: url(images/inactive-header.gif) #f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.accordion-content {
    display: none;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-top: 0;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
4

1 に答える 1

1

少なくとも、アコーディオンコンテンツを左にフロートさせてから、slideToggleをカスタムの.animate（）に置き換える必要があります。jQueryのスライドは上下にのみ実行され、左右には実行されません。ヘッダーも回転させて浮かせる必要があると思います。

于 2012-10-02T20:53:06.073 に答える