javascript - 将悬停自定义导航栏转换为单击

Question

我对 jQuery 有点陌生，所以请多多包涵。我有这个导航栏菜单，悬停时会掉下来。一切正常，但我的计划是将悬停下拉菜单更改为单击，并在单击外部 html 时隐藏下拉菜单。我没有使用任何框架。

<ul class="tc-navigation">
  <li class="active">
    <a href="home.php">HOME</a>
  </li>
  <li>
    <a id="er">SERVICES</a>
    <ul>
      <li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
        <ul>
          <li class="round"><a href="bus.php">Bus</a></li>
          <li class="round"><a href="taxi.php">Taxi</a></li>
          <li class="round"><a href="air.php">Air</a></li>
        </ul>
      </li>
      <li class="round"><a href="car_rental_agencies.php">Car Rental Agencies</a></li>
      <li class="round"><a href="driving_licence.php">Driving Licence</a></li>
    </ul>
  </li>
  <li>
    <a id="er">ABOUT US</a>
    <ul>
      <li class="round"><a href="about_us.php">Who We are</a></li>
      <li class="round"><a href="our_vision.php">Our Vision</a></li>
      <li class="round"><a href="photo_gallery.php">Photo Gallery</a></li>
    </ul>
  </li>
  <li class="round"><a href="contact.php">CONTACT</a></li>
</ul>

CSS

.tc-navigation li>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  top: 120%;
  border-top: 2px solid;
  border-radius: 0;
  position: absolute;
  width: 190px;
  visibility: hidden;
  opacity: 0;
  background: #fff;
  z-index: 10;
}

.tc-navigation li ul li {
  float: none;
  border-bottom: 1px solid #e1e1e1;
}

.tc-navigation li ul li:last-child {
  border: 0;
}

.tc-navigation li ul li a {
  width: 100%;
  color: #444;
  padding: 15px;
  text-transform: capitalize;
  text-align: center;
}

.tc-navigation li:hover>ul {
  visibility: visible;
  opacity: 1;
  top: 100%;
}

.tc-navigation li ul li a:hover {
  color: #fff;
}

.tc-navigation li ul li a:hover i {
  color: #fff;
}

.tc-navigation li ul li a i {
  color: #666;
  position: absolute;
  right: 10px;
  top: 50%;
  margin: -7px 0 0;
}


/* Sub Menu */

.tc-navigation li>ul li ul {
  left: 110%;
  top: 0!important;
}

.tc-navigation li ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  left: 100%;
}

Answer 1

您当前正在 CSS 中使用 :hover 状态为某些 DOM 元素设置不同的规则。 CSS 不直接响应点击事件(链接和按钮的 :active 状态除外，它在这里对你没有真正的帮助)；所以将其转换为点击事件的最简单方法是让这些点击事件在元素上切换 CSS 类，然后可以在 CSS 中使用它，就像您当前使用 :hover。

$('.tc-navigation > li').on("click", function(e) {
  $(this).toggleClass('showSubmenu');
  $(this).siblings().removeClass('showSubmenu'); // prevent two submenus from being "open" at the same time
  return false; // keep the event from bubbling 
});


// Hide menus when clicking outside them.  Might be preferable
// to set this only when a submenu is opened, but for now
// I'mm just brute-forcing it on the entire page:
$(document).on('click', function(){
  $('.tc-navigation > li').removeClass('showSubmenu')
});

#container {position:relative}
body {background-color:#CCC}
.tc-navigation li>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  top: 120%;
  border-top: 2px solid;
  border-radius: 0;
  position: absolute;
  width: 190px;
  visibility: hidden;
  opacity: 0;
  background: #fff;
  z-index: 10;
}

.tc-navigation li ul li {
  float: none;
  border-bottom: 1px solid #e1e1e1;
}

.tc-navigation li ul li:last-child {
  border: 0;
}

.tc-navigation li ul li a {
  width: 100%;
  color: #444;
  padding: 15px;
  text-transform: capitalize;
  text-align: center;
}

/* Changing this selector  from li:hover to li.showSubmenu; the rest of the CSS is as in the original: */
.tc-navigation li.showSubmenu>ul{
  visibility: visible;
  opacity: 1;
  top: 100%;
}

.tc-navigation li ul li a:hover {
  color: #fff;
}

.tc-navigation li ul li a:hover i {
  color: #fff;
}

.tc-navigation li ul li a i {
  color: #666;
  position: absolute;
  right: 10px;
  top: 50%;
  margin: -7px 0 0;
}


/* Sub Menu */

.tc-navigation li>ul li ul {
  left: 110%;
  top: 0!important;
}

.tc-navigation li ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  left: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="tc-navigation">
  <li class="active">
    <a href="home.php">HOME</a>
  </li>
  <li>
    <a id="er">SERVICES</a>
    <ul>
      <li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
        <ul>
          <li class="round"><a href="bus.php">Bus</a></li>
          <li class="round"><a href="taxi.php">Taxi</a></li>
          <li class="round"><a href="air.php">Air</a></li>
        </ul>
      </li>
      <li class="round"><a href="car_rental_agencies.php">Car Rental Agencies</a></li>
      <li class="round"><a href="driving_licence.php">Driving License</a></li>
    </ul>
  </li>
  <li>
    <a id="er">ABOUT US</a>
    <ul>
      <li class="round"><a href="about_us.php">Who We are</a></li>
      <li class="round"><a href="our_vision.php">Our Vision</a></li>
      <li class="round"><a href="photo_gallery.php">Photo Gallery</a></li>
    </ul>
  </li>
  <li class="round"><a href="contact.php">CONTACT</a></li>
</ul>
</div>

(我必须添加一个容器元素以防止子菜单脱离屏幕；定位仍然不太正确，我假设是因为您的 CSS 依赖于此处未显示的其他页面元素，但它足够接近以证明这个想法。除此之外，对您的 CSS 的唯一更改是将 li:hover 更改为 li.showSubmenu 的一行。)