将悬停自定义导航栏转换为Click

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的那一行。）

Answer 2

好的，看看我的菜单

$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.find('li').removeClass('open');
    element.find('ul').slideUp(200);
  } else {
    element.addClass('open');
    element.children('ul').slideDown(200);
    element.siblings('li').children('ul').slideUp(200);
    element.siblings('li').removeClass('open');
    element.siblings('li').find('li').removeClass('open');
    element.siblings('li').find('ul').slideUp(200);
  }
});

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 220px;
  font-family: Raleway, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #bb0e0e;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #ddd;
  background: #49505a;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #ddd;
}

<html lang="ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="cssmenu">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Services</a>
        <ul>
           <li class="has-sub"><a href="#">Transportation</a>
              <ul>
                 <li><a href="#">Bus</a></li>
                 <li><a href="#">Taxi</a></li>
                 <li><a href="#">Air</a></li>
              </ul>
           </li>
           <li><a href="#">Car Rental Agencies</a></li>
           <li><a href="#">Driving Licence</a></li>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-cog"></i> Abut us</a>
        <ul>
           <li><a href="#">Who We are</a></li>
           <li><a href="#">Our Vision</a></li>
           <li><a href="#">Photo Gallery</a></li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>
</body>
</html>