jquery手风琴不同宽度

Question

我想使用 jquery 在此设置中设置手风琴：

 |      Header 1      |
 |Header 2 | Header 3 |
 |      Header 4      |

每个都是一个手风琴项目。这可能吗？如何实现？我还想如果标头 2 打开则标头 3 打开。

TA

Answer 1

像这样？ http://jsfiddle.net/CppLB/1/

HTML:

 <div id="wrapper">
        <div class="accordionButton">Header1</div>
    <div class="accordionContent">Content 1 goes here</div>
        <div class="accordionButton" class="buttonHalf">
            <div class="buttonHalf" id="borderRight">Header 2</div>
            <div class="buttonHalf">Header 3</div>
        </div>
        <div class="accordionContent" class="buttonHalf">
            <div class="buttonHalf">Content 2 goes here</div>
            <div class="buttonHalf">Content 3 goes here</div>
        </div>
        <div class="accordionButton">Header 4</div>
        <div class="accordionContent">Content 4 goes here</div>
</div>

CSS:

 #wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

.accordionButton {    
    width: 100%;
    float: left;
    background: #003366;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
    text-align: center;
    }

.accordionContent {    
    width: 100%;
    float: left;
    background: #95B1CE;
    display: none;
}

.buttonHalf {
    width: 49%;
    float: left;
}

#borderRight {
    border-right: 1px solid black;
}

JS:

$(document).ready(function() {

    //ACCORDION BUTTON ACTION    
    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();

});

Answer 2

使用这种格式：

|       Header 1       |
|   Header 2 Header 3  |
|       Header 4       |

其中 header 2 header 3 部分只是一个 header 标签中的两位文本（或者您可以在 header 标签中使用表格），而手风琴的该部分的 div 包含表格或 css 格式使您描述的效果发生...如果您希望每个标题看起来独立（带有圆角），请使用 css3。