响应式导航 - 如果有孩子则添加一个类答案

【问题标题】：Responsive Nav - Add a class if has children响应式导航 - 如果有孩子则添加一个类
【发布时间】：2017-02-22 20:52:02
【问题描述】：

我现在为桌面构建了一个导航，将导航调整为移动/平板电脑屏幕尺寸，我想在顶级列表项中添加一个“下拉”类，如果它有子项。但我只想对小屏幕（即平板电脑/手机）执行此操作。导航的桌面视图很好。

我的 HTML 代码结构如下：

<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 和 LESS 来构建它。

如何在较小的设备上添加“chevron”或“accordion”类。

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

使用 CSS :not(:only-child) 选择器；选择不是<li> 唯一子级的<a> 标签（即<li> 有另一个子级下拉菜单），并使用伪元素:after 添加箭头符号。

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

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

<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>

【讨论】：