Question

这是可折叠框工作所需的脚本

text-shadow: none;

但是第4行代码在背景和字体方面干扰了我的CSS。这个社区讲述了如何修复背景颜色：

其中h4是我的导航栏中删除蓝色轮廓的代码行（下面的代码），但不会在其他地方删除它。我将其应用于CSS中的<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>和<div class="nav"> <ul> <li><a href="#"> Contacts </a></li> <li><a href="#"> Map </a></li> <li><a href="#"> Reservations </a></li> <li><a href="#"> Online Order </a></li> <li><a href="#"> Menu </a></li> <li><a href="#"> About </a></li> <li><a href="#"> Home </a></li> </ul> </div>标记，但不适用。

通过反复试验，我发现第4行是它干扰的原因。第4行代码（如上所述）：

/* Navigation bar */
.nav {
    font-family: 'Roboto', sans-serif !important;
    margin-top: 20px;
    height: 40px;
    background: #000000;
}

.nav ul {
    margin: 0;
    padding: 0;
}

.nav ul li {
    list-style: none;
}

.nav ul li a {
    text-decoration: none;
    float: right;
    display: block;
    padding: 10px 50px;
    color: white;
    outline: none;

}

.nav ul li a:hover {
    color: #D3D3D3;
}

.headerBreak {
    width: 100%;
    height: 0;
    border-bottom: 2px solid #000000;
}

h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    text-align: right;
    text-decoration: none;
    text-shadow: none;
}

p {
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    text-shadow: none;
}

如果我删除它，我的可折叠框就会消失。但如果我离开它，我会丢失背景颜色和字体。请提前帮助，并提前致谢。

导航栏，下方将提供可折叠的盒子代码。有关更多参考，我已将我的文件上传到免费的网络托管服务商。

正如你所看到的，它所说的“Restaurante etc”的部分，它有这个非常奇怪的阴影，导航栏的字体不是“Roboto”，如CSS代码中提到的，当我悬停时在“关于我们”页面上，它不使用Roboto和Lato，这是我文件中提到的唯一两种字体。

导航栏内容：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

导航栏CSS：

<div data-role="main" class="ui-content">
    <div data-role="collapsible">
        <h2> MENU // SOUPS </h2>
        <p> Blank </p>
    </div>
    <div data-role="collapsible">
        <h2> MENU // BEEF </h2>
        <p> Blank </p>
    </div>
</div>

可折叠盒子脚本：

{{1}}

可折叠包装盒内容：

{{1}}

可折叠盒子脚本干扰CSS

0 个答案: