Question

我正在努力使我的网站可以移动访问。我遇到的问题是nav。我认为它与nav上使用的类有关。所以我想要做的是在使用移动设备时删除该类。

我在媒体查询中使用它并更改了许多内容以使其在移动设备上看起来正确。我读过可以使用

删除一个类

$( "p" ).removeClass( "myClass yourClass" );

我相信我会是

$( "nav" ).removeClass( "navigation" );

但是当放入样式表并通过css验证器时，我得到了

Lexical error at line 104, column 4.
Encountered: "(" (40), after : "$" ( "nav" ).removeClass( "navigation" );

我不知道如何，或者即使我可以解决这个问题。我读过的其他页面说这是不可能的，所以我收到了相互矛盾的信息。

这是我试图发布代码。我的CSS中的所有内容都影响了我的导航。

nav ul { list-style-type: none;
    margin: 0; 
    padding: 0; }
header nav a { text-decoration: none;
    padding: 10px;
    display: block;
    background-color: #a8e6a8;
    border-bottom: 1px solid #228B22; }
nav a:link { color: #228B22; } 
nav a:visited { color: #568b22; } 
nav a:hover { color: #869DC7; 
    background-color: #EAEAEA; }
.navigation { float: right;
    width: 200px;
    font-weight: bold;
    letter-spacing: 0.1em; }

这是我未完成的媒体查询。

@media only screen and (max-width: 1024px) {
  body { margin: 0; padding: 0; background-color: #fff; }
  #wrapper { width: auto; min-width: 0; margin: 0; }
  h1 { margin: 0; text-align: center; font-size: 2em; line-height: 200%; }
  nav { float: none; width: auto; }
  nav li { display: inline-block; }
  nav a { padding: 1em; border-style: none; font-size: 1.2em; }
  nav ul { text-align: center; padding: 0; margin: 0; }
  main { margin: 0; padding: 0 1em; font-size: 90%; }
  dd { margin-bottom: 1em; }
  footer { margin: 0; }
  .navigation { float: none;
    width: auto;
    letter-spacing: 0.1em; };
}

Answer 1

欢迎登机！请尽量简明扼要地提问： - ）

我的回答：您发布的代码是JavaScript。确切地说，jQuery。这肯定不适用于CSS。

但更好的解决方案是使用媒体查询不要删除类，而是更改它。例如：

.foo { width:200px; }
@media print
{
  .foo { width:100px; }
}

将CSS添加到问题后进行编辑：

结尾;看起来像是语法错误：将letter-spacing: 0.1em; };更改为letter-spacing: 0.1em; }

除此之外，媒体查询原则上看起来不错。尝试添加background:red以查看它是否有效： - ）

Answer 2

实际上，您可以使用jQuery添加课程，但我不相信这是达到您需要的最佳方式。

我看到许多设计师正在做的是有两个导航。一个用于大屏幕，另一个用于小屏幕。它可以非常方便，因为您也可以使用不同的HTML代码。例如，您可以将FontAwesome图标添加到移动导航，添加或删除链接等。因此，您的HTML将如下所示：

<nav class="nav-big">
  <ul>
    <li><a href="path">Link 1</a></li>
    <li><a href="path">Link 2</a></li>
    ...
  </ul>
</nav>

<nav class="nav-small">
  <ul>
    <li><i class="fa fa-plus"></i><a href="path">Link 1</a></li>
    <li><i class="fa fa-minus"></i><a href="path">Link 2</a></li>
    ...
  </ul>
</nav>

然后，你的CSS看起来像这样：

.nav-big {
...your styles 
}

.nav-small {
  ...your styles
}

@media screen and (min-width: 1024px) {
    .nav-small {
      display: none;
    }
}

@media screen and (max-width: 1023px) {
    .nav-big {
        display: none;
    }
}

您可以在Blog以及我开发的另一个website中看到类似的内容。

希望有所帮助。如果我这样做，请将答案标记为有用或正确！谢谢！

Answer 3

$("nav").removeClass("navigation");是JavaScript，而不是CSS。从概念上讲，您无法在CSS中添加/删除类 - 它只是一种样式描述语言。

你 >在CSS中做的是显示/隐藏特定设备宽度的内容（＆＃34;断点＆＃34; ）：

.navigation {
  display: block;
  /* your style definitions for nav */
}

@media only screen and (max-device-width: 800px) {
  .navigation {
    display: none;
  }
}

删除CSS样式表中的类

3 个答案: