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

谢谢MateuszJuruś带领我朝着正确的方向前进！

通过将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

移动导航切换html / css

3 个答案: