Question

我想使用jquery在此设置中设置accordion：

 |      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       |

其中标题2标题3部分只是一个标题标记中的两位文本（或者您可以使用标题标记中的表格），并且该部分手风琴的div包含表格或css格式以产生效果你描述的发生了...如果你想让每个头像看起来都是个体的（带圆角），请使用css3。

手风琴不同宽度jquery

2 个答案: