0

我对 Jquery 没有那么丰富的经验，所以请原谅这个基本问题。我正在使用这个简单的 jquery 手风琴http://www.switchroyale.com/vallenato/

是否可以更改 jquery 或 css 以使其垂直而不是水平。似乎没有太多关于此事的文件。任何帮助，将不胜感激。

这是javascript

$(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 回答