Question

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

Answer 1

至少，您必须将手风琴内容浮动，然后将slideToggle替换为自定义.animate（）。 jQuery中的幻灯片只能向上或向下而不是向左或向右。我想你也必须旋转标题并浮动它们。

手风琴是垂直而不是水平

1 个答案: