Jquery 将手风琴的div视为一个_Jquery_Css_Jquery Ui

Jquery 将手风琴的div视为一个

jquery css jquery-ui

Jquery 将手风琴的div视为一个,jquery,css,jquery-ui,Jquery,Css,Jquery Ui,我的手风琴网格如下： <body> <div> <div class='accordion-left'> <h3>Left 1</h3> <div></div> </div> <div class='accordion-right'> <h3>Righ

我的手风琴网格如下：

<body>
    <div>
        <div class='accordion-left'>
            <h3>Left 1</h3>
            <div></div>
        </div>
        <div class='accordion-right'>
            <h3>Right 1</h3>
            <div></div>
        </div>
    </div>

    <div>
        <div class="accordion-left">
            <h3>Left 2</h3>
            <div></div>
        </div>
        <div class="accordion-right">
            <h3>Right 2</h3>
            <div></div>
        </div>
    </div>
</body>


左1
对1
左2
对2

我也有一个朋友

由于“Left 1”和“Right 1”在同一父级

div

中，我希望如果我单击“Left 1”，那么“Left 2”和“Right 2”都会一起下拉。然而，两者都会错位。如果单击“右1”，则只会下拉“右2”。此外，如果每个手风琴的兄弟姐妹div的高度不同，我也希望最下面一排div根据最高div一起落下

如何将手风琴的a

div

视为一个实体？

您可以使用“clearfix hack”：

在您的手风琴家长：

.accordion-parent:before, .accordion-parent:after {
    content:"";
    display:table;
}
.accordion-parent:after {
    clear:both;
}

同一条线上的手风琴没有相同高度的问题（在我的演示中添加）

请参阅更新：

这是因为您使用的是

float

。尝试为您的手风琴使用内嵌块。同时稍微调整宽度，使左侧和右侧显示在同一条线上。此外，使用垂直对齐：如果要使它们垂直对齐，请单击“顶部”

div {
    vertical-align: top;
}

.accordion-left {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}
.accordion-right {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}

我对代码做了一些修改，在这两个代码中都添加了一个容器，而不是左-右、左-右-右-左-左、右-右组合。现在容器有了宽度，手风琴始终是容器的100%

我真的无法想象你在做什么。但是，如果您希望一个面板影响所有其他面板，那么它们应该位于同一个父面板中，其次，在代码中，它们不是。他们在同一个“大”父母身上，不在同一个父母身上。如果您使用的是jqueryui，那么基于最高div的高度是标准的。如果您发布jquery代码，可能会更有帮助。@Leo，这个JSFIDLE链接就是为您准备的所有代码。这可以防止最下面一行的手风琴错位，但是当单击最上面一行的手风琴时，最下面一行的手风琴不会作为一个整体一起移动。所有伟大的解决方案，Edward和Nicolas。我将使用Nicolas的解决方案，因为如果我将内容添加到手风琴的div中，它不会显示滚动条。感谢您的快速响应。如果您在手风琴项目中谈论滚动，只需在手风琴上添加

heightStyle:'content'

属性；-）那么，我更喜欢爱德华的解决方案。虽然我把尼古拉斯R的回答作为答案，但我最终还是用了这个，因为它更简单。在这里使用

float

属性似乎不合适。在我的版本中，我只有一个accordions类，我将

vertical align

属性放在声明中。

  <div class="container"> <!-- new class -->
    <div class='accordion-left'>
        <h3>Left 1</h3>
        <div></div>
    </div>
    <div class='accordion-left'>
        <h3>left 2</h3>
        <div></div>
    </div>
</div>

<div class="container"> <-- new class
    <div class="accordion-right">
        <h3>right 1</h3>
        <div></div>
    </div>
    <div class="accordion-right">
        <h3>Right 2</h3>
        <div></div>
    </div>
</div>

.container{
    width: 50%;  /* define width */
    display:inline-block;
    float:left;
}
.accordion-left {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}
.accordion-right {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}