时间戳

首页 > 解决方案 > 单击时切换导航栏

javascript - 单击时切换导航栏

问题描述

我有创建导航栏的脚本，它只能在悬停时打开下拉菜单，问题是当通过移动浏览器访问时，下拉菜单无法打开，如何修改此脚本以使下拉菜单在单击时打开父菜单

<div class="collapse navbar-collapse offset w-100" id="navbarSupportedContent">
            <div class="row w-100 mr-0">
              <div class="col-lg-7 pr-0">
                <ul class="nav navbar-nav center_nav pull-right">
                  <li class="nav-item ">
                    <a class="nav-link" href="index.html">Home</a>
                  </li>
                  <li class="nav-item submenu dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                      aria-expanded="false">Paket</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item">
                        <a class="nav-link" href="category.html">Pestgre</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item submenu dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                      aria-expanded="false">Blog</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item">
                        <a class="nav-link" href="blog.html">Blog</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="single-blog.html">Blog Details</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item submenu dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                      aria-expanded="false">Pages</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item">
                        <a class="nav-link" href="tracking.html">Tracking</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="elements.html">Elements</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

标签： javascripthtmljquerycss

解决方案

对于移动版本，我会使用汉堡菜单（如果您不知道，则为三行）。您可以找到该图标或将其设为您自己。在 javascript 或 jquery 中，说

const getMenu = document.getElementById("menuButtonsId"); //be sure to call this code after after the document has loaded, or else javascript won't find the button or icon.
getMenu.onclick(function(){
  if (the menu is closed) {
    open the menu
  } else {
    close the menu
  }
})

我对jquery不太了解，但我认为你可以做这样的事情

$("#menuButtonsId").click(function() {
  if (the menu is closed) {
    open the menu
  } else {
    close the menu
  }
})

只需填写我在代码中输入的占位符文本。我希望这回答了你的问题！

推荐阅读