Question

所以，我已经完成了一个非常基本的Jquery手风琴，但对于我的生活，我无法在手风琴内容中找出导致这个白盒的原因。

我将在此处发布我的JSFiddle链接，以便于访问我的代码。

我相信你们中的一个人会在几秒钟内把它摘下来，我只是在JQUERY的初学者。

谢谢！

HTML

<div id="accordion">

<h3>This is a test<h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed libero metus, aliquet vel euismod id, mattis sed quam. Nulla interdum leo adipiscing enim commodo hendrerit vel vitae lectus. Vivamus vehicula orci ac leo luctus ac egestas purus eleifend. Vivamus ac mauris risus, quis tempor massa. .</p>
    </div>
</div> <b>This text moves down with ACCORDION</b>

的Javascript

  $(function () {
      $("#accordion").accordion({
          event: "click",
          active: false,
          collapsible: true,
          autoHeight: false

      });
  });

CSS

#accordion {

    width: 400px;

}

#accordion .ui-accordion-content > * {

    margin: 0px;

}

#accordion .ui-accordion-content {

    width: 100%;

    background-color: #777;

    color: #000;

    border: none;

    font-size: 10pt;

    line-height: 15pt;

}

#accordion .ui-accordion-content a {

    color: #777;

}

#accordion .ui-accordion-header {

    background-color: #ccc;

    margin-left: auto;

    margin-right: auto;

    border: #fff;

}

#accordion .ui-accordion-header {

    background-color: #fff;

    background-image: -moz-linear-gradient(top, #fff 0%, #fff 100%);

    /* FF3.6+ */

    background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%, #fff), color-stop(100%, #fff));

    /* Chrome,Safari4+ */

    background-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);

    /* Chrome10+,Safari5.1+ */

    background-image: -o-linear-gradient(top, #fff 0%, #fff 100%);

    /* Opera 11.10+ */

    background-image: -ms-linear-gradient(top, #fff 0%, #fff 100%);

    /* IE10+ */

    background-image: linear-gradient(to bottombottom, #fff 0%, #fff 100%);

    /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa9300', endColorstr='#dc621e', GradientType=0);

    /* IE6-9 */

}

Answer 1

在您选择的浏览器中使用检查工具，您将能够跟踪CSS属性。

这通常是CSS调试的完成方式。

.ui-widget-content {
    border: 1px solid rgb(170, 170, 170);
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% rgb(255, 255, 255);
    color: rgb(34, 34, 34);
}

这似乎导致了您的问题：

background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% rgb(255, 255, 255);

但是没有可用的图像：

background: rgb(255, 255, 255);

强制您的浏览器将背景颜色插入白色，这是CSS background属性的可接受参数。

是什么导致我的Jquery手风琴内的这个白盒子？

1 个答案: