Question

设置手风琴内容的风格有点问题。问题是当我使用以下代码和单独的 CSS 文件时， CSS 文件中定义的样式不会应用于我的手风琴的内容：

<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

您是否有特殊原因以这种方式包含手风琴的标记？如何将append通过变量添加到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>

这样，手风琴的标记不是由javascript生成的，如果我不是非常错误，那应该适用你的CSS规则。

CSS风格的手风琴

1 个答案: