问题：

响应导航-如果有子类，则添加一个类

东方弘壮

2023-03-14

我已经为桌面构建了一个nav。现在，在将nav调整为移动/平板电脑屏幕大小时，我想在顶级列表项中添加一个“下拉”类，如果它有子项的话。但我只想在小屏幕上这样做，比如平板电脑/手机。导航的桌面视图很好。

我的超文本标记语言代码结构如下：

<nav>
    <ul>
        <li class="mobile">
            <a href="#">
                <span>Favourites</span>
            </a>
        </li>
        <li class="dashboard">
            <a href="#">
                <span>Dashboard</span>
            </a>
        </li>
        <li class="fitness">
            <a href="#">
                <span>Fitness</span>
            </a>
            <ul>
                <li>
                    <a href="#">Stuart &amp; Elise</a>
                </li>
                <li>
                    <a href="#">Workouts</a>
                </li>
                <li>
                    <a href="#">Fitness Plans</a>
                </li>
                <li>
                    <a href="#">Build my own plan</a>
                </li>
                <li>
                    <a href="#">Articles &amp; Videos</a>
                </li>
            </ul>
        </li>
        <li class="food">
            <a href="#">
                <span>Food &amp; Nutrition</span>
            </a>
            <ul>
                <li>
                    <a href="#">Faith Toogood</a>
                </li>
                <li>
                    <a href="#">Recipes</a>
                </li>
                <li>
                    <a href="#">Meal Plans</a>
                </li>
                <li>
                    <a href="#">Build my own plan</a>
                </li>
                <li>
                    <a href="#">Articles &amp; Videos</a>
                </li>
            </ul>
        </li>
        <li class="health">
            <a href="#">
                <span>Health &amp; Wellbeing</span>
            </a>
            <ul>
                <li>
                    <a href="#">Dr Hilary Jones</a>
                </li>
                <li>
                    <a href="#">Emma kenny</a>
                </li>
                <li>
                    <a href="#">Journal</a>
                </li>
                <li>
                    <a href="#">Moodtracker</a>
                </li>
                <li>
                    <a href="#">Goal Tracker</a>
                </li>
                <li>
                    <a href="#">Articles &amp; Videos</a>
                </li>
            </ul>
        </li>
        <li class="community">
            <a href="#">
                <span>Community</span>
            </a>
            <ul>
                <li>
                    <a href="#">Groups</a>
                </li>
                <li>
                    <a href="#">Stories</a>
                </li>
                <li>
                    <a href="#">Guests</a>
                </li>
            </ul>
        </li>
        <li class="help">
            <a href="#">
                <span>Help &amp; Info</span>
            </a>
            <ul>
                <li>
                    <a href="#">Quick start guides</a>
                </li>
                <li>
                    <a href="#">FAQ</a>
                </li>
                <li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </li>
        <li class="mobile">
            <a href="#">
                <span>Logout</span>
            </a>
        </li>
    </ul>
</nav>

我用的是Bootstrap

我如何在一个较小的设备上添加一个“雪佛龙”或“手风琴”类。

共有1个答案

贡烨烁

2023-03-14

使用CSS： not（：独生子女）选择器；选择

nav li > a:not(:only-child):after {
    content: '\00A0 \2193';
}

nav li:hover > a:not(:only-child):after {
    content: '\00A0 \2191';
}

html prettyprint-override"><nav>
  <ul>
    <li class="mobile">
      <a href="#">
        <span>Favourites</span>
      </a>
    </li>
    <li class="dashboard">
      <a href="#">
        <span>Dashboard</span>
      </a>
    </li>
    <li class="fitness">
      <a href="#">
        <span>Fitness</span>
      </a>
    </li>
    <li class="food">
      <a href="#">
        <span>Food &amp; Nutrition</span>
      </a>
      <ul>
        <li>
          <a href="#">Faith Toogood</a>
        </li>
        <li>
          <a href="#">Recipes</a>
        </li>
        <li>
          <a href="#">Meal Plans</a>
        </li>
        <li>
          <a href="#">Build my own plan</a>
        </li>
        <li>
          <a href="#">Articles &amp; Videos</a>
        </li>
      </ul>
    </li>
    <li class="health">
      <a href="#">
        <span>Health &amp; Wellbeing</span>
      </a>
      <ul>
        <li>
          <a href="#">Dr Hilary Jones</a>
        </li>
        <li>
          <a href="#">Emma kenny</a>
        </li>
        <li>
          <a href="#">Journal</a>
        </li>
        <li>
          <a href="#">Moodtracker</a>
        </li>
        <li>
          <a href="#">Goal Tracker</a>
        </li>
        <li>
          <a href="#">Articles &amp; Videos</a>
        </li>
      </ul>
    </li>
    <li class="community">
      <a href="#">
        <span>Community</span>
      </a>
      <ul>
        <li>
          <a href="#">Groups</a>
        </li>
        <li>
          <a href="#">Stories</a>
        </li>
        <li>
          <a href="#">Guests</a>
        </li>
      </ul>
    </li>
    <li class="help">
      <a href="#">
        <span>Help &amp; Info</span>
      </a>
      <ul>
        <li>
          <a href="#">Quick start guides</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
      </ul>
    </li>
    <li class="mobile">
      <a href="#">
        <span>Logout</span>
      </a>
    </li>
  </ul>
</nav>

类似资料：

如果有类，则将类添加到另一个

我有一个活动选项卡的自动播放选项卡类current，这意味着当该选项卡活动时，有一个名为current的类。现在我要向第一个子添加不同的类 null null
响应式WordPress导航栏-附加CSS

嗨，我坚持在Wordpress中定制这个额外的CSS。我使用了一个名为Poza Child的主题，它的最大宽度（100%）如下图所示。我想制作一个反应灵敏的导航栏，让它充满屏幕。正如你在这里看到的，有一个缺口（黑色和灰色）。我想制作一个响应迅速的导航栏（全黑），就像下面的一样。然而，由于使用的主题，我必须添加额外的CSS，使其全宽和响应任何屏幕大小。这是我的WordPress附加CSS的代码片
Bootstrap实现响应式导航栏效果

本文向大家介绍Bootstrap实现响应式导航栏效果，包括了Bootstrap实现响应式导航栏效果的使用技巧和注意事项，需要的朋友参考一下为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个
如何添加导航抽屉？

问题内容：在以下活动中，我上面有一个片段和一个图像。片段只是一个较暗的操作栏，上面有图片。我正在尝试将左侧幻灯片菜单作为一个片段，以便可以在每次活动中使用它。主要活动; 主要活动XML；每个活动上应包含的标题栏片段；标题栏片段XML；如何在标题栏中实现导航抽屉？问题答案：尝试这样的操作，对于布局文件，您只需要实现可以像这样简单。
添加基于URL的活动导航类

问题内容：我正在尝试在页面加载后根据其所在的页面将一个类（即）添加到适当的菜单列表项。下面是我现在的菜单。我已经尝试了在这方面可以找到的所有代码片段，但是没有任何效果。因此，有人可以简单解释一下在何处以及如何在JavaScript中添加以定义此任务吗？这是我在网站管理员中将head标签放入的javascript的示例。我究竟做错了什么？问题答案：这不起作用的原因是因为javascript正
如果另一个列表项有一个特定的类，我如何添加一个列表项？

我有一个活动选项卡的自动播放选项卡类current，这意味着当选项卡是活动的时，列表项有一个名为current的类。现在我要向第一个子添加不同的类 null null

响应导航-如果有子类，则添加一个类

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档