jquery - Accordion 的CSS样式

Question

我在设置 Accordion 内容的样式时遇到了一点问题。问题是当我使用以下代码和单独的 CSS 文件时，CSS 文件中定义的样式不会应用于我的 accordion 的内容:

<script>
    $(document).ready(function() {
    var str = '<h3><a href="#">Device</a></h3>' +
            '<div class="content">'+
                '<div class="block left">' +
                    '<img width=30 height=30/>' +
                '</div>' +
                '<div class="block left">' +
                    '<img width=30 height=30/>' +
                '</div>' +
            '</div>' +
          '<h3><a href="#">VM</a></h3>' +
            '<div class="content">'+
                '<div class="block left">' +
                    '<img width=30 height=30/>' +
                '</div>' +
                '<div class="block left">' +
                    '<img width=30 height=30/>' +
                '</div>' +
            '</div>';

CSS 文件中的相关代码:

div.toolbox-block {
    width:30px;
    height:30px;
    overflow: hidden;
    background-color: rgba(0,0,0,1);
}
div.left {
    float:left !important;
}

如果我将样式内联设置为变量 str 中的标签，则上面的代码可以正常工作:

str = '<h3><a href="#">Device</a></h3>' +
            '<div class="content">'+
                '<div style="width:30px; height:30px; overflow: hidden; background-color: rgba(0,0,0,1); float: left;">' +
                    '<img width=30 height=30/>' +
                '</div>' +
                '<div style="width:30px; height:30px; overflow: hidden;  background-color: rgba(0,0,0,1);float:left;">' +
                    '<img width=30 height=30/>' +
                '</div>' +
            '</div>' +
          '<h3><a href="#">VM</a></h3>' +
            '<div class="content">'+
                '<div style="width:30px; height:30px; overflow: hidden;  background-color: rgba(0,0,0,1);float:left;">' +
                    '<img width=30 height=30/>' +
                '</div>' +
                '<div style="width:30px; height:28px; overflow: hidden;  background-color: rgba(0,0,0,1);float:left;">' +
                    '<img width=30 height=30/>' +
                '</div>' +
            '</div>';

Answer 1

您是否有特殊原因以这种方式包含 Accordion 的标记？与其通过变量追加，不如将其添加到 HTML 文件，最初使用 CSS 隐藏它，然后在准备好文档时使用 jQuery 使其可见。

像这样:

<div id="accordion" class="hidden">
    <h3><a href="#">Device</a></h3>
    <div class="content">
        <div class="block left">
            <img width=30 height=30/>
        </div>
        <div class="block left">
            <img width=30 height=30/>
        </div>
    </div>
    <h3><a href="#">VM</a></h3>
    <div class="content">
        <div class="block left">
            <img width=30 height=30/>
        </div>
        <div class="block left">
            <img width=30 height=30/>
        </div>
    </div>
</div>

还有你的javascript:

<script>
$(document).ready(function() {
    $('#accordion').removeClass('hidden') // removes default CSS class to make it visible
        .accordion(); // makes it an accordion
});
</script>

这样一来， Accordion 的标记就不会由 javascript 生成，如果我没弄错的话，那应该可以很好地应用您的 CSS 规则。