jquery - 使用 CSS 和 jQuery 在行和列中并排对齐 H 标签

Question

我正在显示多个嵌套类别:州 > 商店类型 > 商店列表。所有类别标题都在 h2 标签中。现在，它一次显示一行堆叠在一起的状态。我无法将状态并排列在 3 列中，因为它们由 jQuery 控制为我无法更改的 h2 标记。我可以将 h2 标签转换为 div 并将它们 float ，但随后嵌套层次结构会中断。

现在是这样的:

http://screencast.com/t/Xkwp0CNE4AP1

http://screencast.com/t/WzrANEFtw

我正在尝试更改 css 以使其看起来像这样。

http://screencast.com/t/WHoP9Zhnl3Y

什么都试过了，但它破坏了 jQuery。

CSS

    .oestlstore {
    float:left;display: inline-block;width:20%;padding:15px;
  }

/* root element for accordion. decorated with rounded borders and gradient background image */
.accordion {
background:#000;
width: 99%;
padding-top:0px;
 -background:#666;


}

/* accordion header */
.accordion h2 {
background:#A91414;
margin:0;
padding:5px 15px;
font-size:18px;
font-weight:bold;
cursor:pointer;
color: #fff;
margin:15px;
padding-top:9px;
padding-bottom:9px;
text-align:center;
text-transform:uppercase;

}


/* accordion header */
.accordion2 h2 {
background:#000;

}


/* currently active header */
.accordion h2.current {
cursor:default;
background-color:#B40404;

}
/* currently active header */
.accordion2 h2.current {
cursor:default;
background-color:#000;

}

/* accordion pane */
.accordion .pane {
display:none;
padding:15px;
color:#fff;
font-size:16px;
}

/* a title inside pane */
.accordion .pane h3 {
font-weight:normal;
margin:0 0 -5px 0;
font-size:16px;
color:#999;
}

查询

<script type='text/javascript'>//<![CDATA[ 

$(document).ready(function() {
//Initialising Accordion
$(".accordion").tabs(".pane", {
    tabs: '> h2',
    effect: 'slide',
    initialIndex: null
});

//The click to hide function
$(".accordion > h2").click(function() {
    if ($(this).hasClass("current") && $(this).next().queue().length === 0) {
        $(this).next().slideUp();
        $(this).removeClass("current");
    } else if (!$(this).hasClass("current") && $(this).next().queue().length === 0) {
        $(this).next().slideDown();
        $(this).addClass("current");
    }
});
});
//]]>  

</script>

HTML

<div class="accordion">
<h2>New York</h2>
<div class="pane">
    <div class="accordion accordion2">
        <h2><img src="/wp-content/uploads/2014/10/Whole-Foods-Market-    Logoa.png" alt="Whole Foods Market" /></h2>
        <div class="pane">

             <div class="oestlstore">
                Market 97th St<br />
                 808 Columbus Ave.<br />
               New York, NY 10025
               </div>

        </div>

 <h2 ><img src="/wp-content/uploads/2014/10/stopshopicon.jpg" alt="Stop & Shop" style="margin-top:10px;" /></h2>
        <div class="pane">
          test
        </div>

<h2><img src="/wp-content/uploads/2014/10/ShopRiteicon.png" alt="ShopRite" /></h2>
        <div class="pane">
          test
        </div>


    </div>
</div>
<h2>New Jersey</h2>
<div class="pane">
    content
</div>
</div>

Answer 1

如果我对你的理解正确，你可以得到红色 h2通过添加 display:inline 并排排列的选项卡到 .accordian h2 CSS

详情见下文

.oestlstore {
    float:left;display: inline-block;width:20%;padding:15px;
}
.split{
    margin:25px;
}
/* root element for accordion. decorated with rounded borders and gradient background image */
.accordion {
    background:#000;
    width: 99%;
    padding:12px;
    -background:#666;
}

/* accordion header */
.accordion h2 {
    background:#A91414;
    padding:9px 15px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    color: #fff;
    margin:15px;
    text-align:center;
    text-transform:uppercase;
    display:inline;
}


/* accordion header */
.accordion2 h2 {
    background:#000;
}


/* currently active header */
.accordion h2.current {
    cursor:default;
    background-color:#B40404;
}
/* currently active header */
.accordion2 h2.current {
    cursor:default;
    background-color:#000;
}

/* accordion pane */
.accordion .pane {
    display:none;
    padding:15px;
    color:#fff;
    font-size:16px;
}

/* a title inside pane */
.accordion .pane h3 {
    font-weight:normal;
    margin:0 0 -5px 0;
    font-size:16px;
    color:#999;
}

和一个分割层的div来停止

<div class="accordion">
    <h2>New York</h2>
    <div class="pane">
        content
    </div>
    <h2>New Jersey</h2>
    <div class="pane">
        content
    </div>
    <h2>California</h2>
    <div class="pane">
        content
    </div>

    <div class="split"></div><!-- this is what you can use to split the levels -->

    <h2>New York</h2>
    <div class="pane">
        content
    </div>
    <h2>New Jersey</h2>
    <div class="pane">
        content
    </div>
    <h2>California</h2>
    <div class="pane">
        content
    </div>   
</div>

这是它在 jsfiddle 上的样子