移动导航切换html/css

Question

我正在创建一个如下所示的移动导航： Mobile navigation

我想做的是使下拉菜单可切换，所以当我点击房屋时它会下降，但当我再次点击它时它会回到原来的位置，我已经研究了一段时间但没有找到任何有效的东西。

那里一定有一位网络专家可以轻松解决这个问题。

谢谢！

-Akyx

（代码如下）

HTML：

 <!-- Mobile nav -->
<nav class="vertical-nav">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="#">About Nijmegen&#8964;</a>
      <ul>
        <li><a href="the-area-of-nijmegen.php">The area</a></li>
        <li><a href="useful-information.php">Useful information</a></li>
      </ul>
    </li>
   <li><a href="#">Housing&#8964;</a>
      <ul>
        <li><a href="finding-a-house-nijmegen.php">Finding a house</a></li>
        <li><a href="contract-types.php">Contract types</a></li>
        <li><a href="layout-of-housing.php">Layout of housing</a></li>
        <li><a href="housing-offers.php">Housing offers</a></li>
      </ul>
    </li>
    <li><a href="#">Settling in&#8964;</a>
      <ul>
        <li><a href="parking.php">Parking</a></li>
        <li><a href="transportation.php">Transportation</a></li>
        <li><a href="garbage.php">Garbage</a></li>
        <li><a href="settling-in-utilities.php">About Utilities</a></li>
        <li><a href="biking.php">Biking</a></li>
        <li><a href="public-transportation.php">Public Transportation</a></li>
        <li><a href="driving-a-car.php">Driving a car</a></li>
      </ul>
    </li>
    <li><a href="#">Finances&#8964;</a>
      <ul>
        <li><a href="mortgage.php">Mortgage</a></li>
        <li><a href="banking.php">Banking</a></li>
        <li><a href="getting-insured.php">Getting Insured</a></li>
      </ul>
    </li>
    <li><a href="#">Where to go&#8964;</a>
      <ul>
        <li><a href="events.php">Events</a></li>
        <li><a href="musea.php">Musea</a></li>
        <li><a href="food-and-drinks.php">Food and Drinks</a></li>
        <li><a href="where-to-go-meet-up.php">Meet up</a></li>
        <li><a href="where-to-go-sports.php">Sports</a></li>
        <li><a href="cinemas.php">Cinemas</a></li>
        <li><a href="daily-life.php">Daily life</a></li>
        <li><a href="hotspots.php">Hotspots</a></li>
      </ul>
    </li>
    <li><a href="get-in-touch.php">Get in touch</a></li>
  </ul>
</nav>

CSS：

nav.vertical-nav {
        position: relative;
        background: #000000;
            /*test*/
        -webkit-overflow-scrolling: touch;
    }

    nav.vertical-nav ul {
        list-style: none;
        border-bottom: none;
    }

    nav.vertical-nav li {
        position: relative;
    }

    nav.vertical-nav li li {
        background-color: #7f7f7f;
    }

    nav.vertical-nav a {
        display: block;
        color: #eee;
        text-decoration: none;
        padding: 10px 15px;
        transition: 0.2s;
        border-bottom: 1px solid #666666;
    }

    nav.vertical-nav li:hover > a {
        background-color: #4c4c4c;
    }

    nav.vertical-nav ul ul {
        background: rgba(0,0,0,0.1);
        padding-left: 20px;
        transition: max-height 0.2s ease-out;
        max-height: 0;
        overflow: hidden;
    }
    nav.vertical-nav li:hover > ul {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }

Answer 1

您可能想要做的是使用 JavaScript 添加一些基本功能。 这是一个非常简单的示例，说明您尝试使用一点 jquery JSFiddle

$("ul").click(function(){
    $("li").toggle(300);
});

Answer 2

您可以使用 Javascript 解决方案而不是使用 CSS hover。 Pen.

var supportsTouch = "ontouchstart" in window || navigator.msMaxTouchPoints;

if (supportsTouch) {
  $("nav.vertical-nav > ul > li").on("click", function() {
    $(this).toggleClass("expand");
  });
} else {
  $("nav.vertical-nav > ul > li").on("mouseenter mouseleave", function() {
    $(this).toggleClass("expand");
  });
}

希望这会有所帮助。

Answer 3

感谢 Mateusz Juruś 带领我朝着正确的方向前进！

我通过将 Javascript 代码更改为以下代码来（有点）工作：

<script>
$("ul li").click(function(){
$("ul li ul li").toggle(300);});

只是仍然存在必须单击两次按钮才能打开它的问题。 如果有人知道这个问题的解决方案，我将不胜感激。

另外不要忘记将 jquery 添加到您的标题中，我忘了这样做。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

再次感谢

-Akyx