时间戳

首页 > 解决方案 > 单击图标后如何显示我的列表项？

javascript - 单击图标后如何显示我的列表项？

问题描述

我为移动用户编写了一个下拉菜单，但它不起作用。该网站是响应式的，因此您可以看到宽度为 700 像素的下拉菜单图标。单击图标后，菜单应打开，列表项应显示在彼此顶部的列表中。

我使用了 JavaScript：

$(document).ready(function() {
  $(".fa-bars").on("click", function() {
    $("header nav ul li").toggleClass("open");
  });
});

HTML：

    <!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <head>
      <meta charset="utf-8">
      <title>Daniel | Website</title>

      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">

      <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
      <script src="../../js/mobile-menu.js"></script>#
      <script src="js/lernen.js"></script>

      <link rel="stylesheet" type="text/css" href="../../css/all.css">
      <link rel="stylesheet" type="text/css" href="style.css">


    </head>
  </head>
  <body>

<!-- HEADER ---------------------------------------------------------------------------------------------->

    <header>
      <div id="logo">
        <a href="../home/"><img src="../../img/logo.png" alt="Das Logo wurde nicht gefunden!!"></a>
      </div>

      <nav id="main-nav">
        <i class="fa fa-bars" aria-hidden="true"></i>
        <ul>
          <li><a href="#home"> Lernen </a></li>
      <li><a href="#was"> Was? </a></li>
      <li><a href="#fuer-wen"> Für wen? </a></li>
      <li><a href="#kontakt"> Kontakt </a></li>
      <li><i class="fas fa-users-cog", id="user-cog"></i></li>

        </ul>

      </nav>

    </header>

CSS：

header nav ul li{
    display: none;
  }

header nav ul li.open{
    display: block;
    float: none;
    padding-top: 10px;
    padding-bottom: 10px;
  }

标签： javascriptcssdropdown

解决方案

当我在这里将您自己的代码复制并粘贴到编辑器中时，它就可以工作了。我必须清理一些关于标记的事情（<head>标记已重复，bodyandhtml标记需要关闭），但这让我认为问题可能不在于 Javascript 或 CSS。

顺便说一句，您可以考虑显示和隐藏sul而不是所有的lis。效果相同，但选择和切换的东西更少。

$(document).ready(function() {
  $(".fa-bars").on("click", function() {
    $("header nav ul li").toggleClass("open");
  });
});
header nav ul li{
    display: none;
  }

header nav ul li.open{
    display: block;
    float: none;
    padding-top: 10px;
    padding-bottom: 10px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


    <header>
      <div id="logo">
        <a href="../home/"><img src="../../img/logo.png" alt="Das Logo wurde nicht gefunden!!"></a>
      </div>

      <nav id="main-nav">
        <i class="fa fa-bars" aria-hidden="true">|||</i>
        <ul>
          <li><a href="#home"> Lernen </a></li>
      <li><a href="#was"> Was? </a></li>
      <li><a href="#fuer-wen"> Für wen? </a></li>
      <li><a href="#kontakt"> Kontakt </a></li>
      <li><i class="fas fa-users-cog", id="user-cog"></i></li>

        </ul>

      </nav>

    </header>

推荐阅读