导航子菜单没有重新出现的问题

Question

在 jQuery 设置 css 后，导航栏上的子菜单不显示。当我点击子菜单项时，容器被设置为display:none，但是当我再次将鼠标悬停在菜单项上时，子菜单不会显示。

.navmenu {
     height: 32px;
     list-style-type: none;
     margin: 0;
     padding: 0;
     text-align: justify;
}
 .navmenu li {
     display: inline-block;
     line-height: 2em;
}
 .navmenu li a {
     display: block;
     font-family: THCFontSemiBold;
     font-weight: bold;
     color: #f3ac3f;
     text-decoration: none;
}
 .navmenu li:hover {
     background: #6d1238;
}
 .navmenu li ul {
     margin: 13px 0px 0px 7px;
     padding: 0;
     display: inline-block;
     position: absolute;
     background: #510E2A;
     border: 2px solid #AA6180;
     list-style-type: none;
     box-shadow: 5px 10px 15px #000;
     z-index: 1;
     visibility: hidden;
}
 .navmenu li ul:before, .navmenu ul:after {
     content: '';
     height: 0px;
     width: 0px;
     position: absolute;
     top: -15px;
     left: 10px;
}
 .navmenu li ul:before {
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 15px solid #AA6180;
}
 .navmenu li ul:after {
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 15px solid #510E2A;
     top: -12px;
}
 .navmenu li ul li {
     line-height: 1.8em;
     display: block;
     text-align: left;
     margin: 8px;
}
 .navmenu li:hover ul {
     visibility: visible;
}
 .navmenu:after {
     content: '';
     display: inline-block;
     width: 100%;
     clear: both;
}

<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navd">
   <ul class="navmenu">
      <li><a href="#" id="mnu_Home">Home</a></li>
      <li><a href="#" id="mnu_aboutus">About Us</a></li>
      <li>
         <a href="#" id="mnu_services">Services</a>
         <ul>
            <li><a href="#" id="mnu_painmanagement">Pain Management</a></li>
            <li><a href="#" id="mnu_weightloss">Weight Loss</a></li>
            <li><a href="#" id="mnu_cosmetic">Cosmetic Procedure</a></li>
            <li><a href="#" id="mnu_vitamins">Vitamin Injections</a></li>
         </ul>
      </li>
      <li><a href="#" id="mnu_testimonials">Testimonials</a></li>
      <li><a href="#" id="mnu_patientforms">Patient Forms</a></li>
      <li><a href="#" id="mnu_contactus">Contact Us</a></li>
      <li><a href="#" id="mnu_patientportal">Patient Portal</a></li>
   </ul>
</div>

请告知我如何更正此问题或有关如何在桌面和移动设备上处理此菜单的任何其他建议（当您将鼠标悬停在容器外时，移动设备不会隐藏子菜单）。

My Fiddle is Here

Answer 1

如评论所述，toggle() 函数将内联 style="display:none" 添加到元素中。

您可以通过添加轻微超时功能来删除该属性来修复。

$("#mnu_services_drop a").on('click', function(e) {
  e.stopPropagation();
  $("#mnu_services_drop").toggle();
}).on('mouseup', function() {
  setTimeout(function() {
    $("#mnu_services_drop").removeAttr('style');
   }, 100);
});

.navmenu {
  background: #510E2A;
  height: 35px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: justify;
}

.navmenu li {
  float: left;
}

.navmenu li a {
  display: block;
  padding: 9px 20px;
  text-decoration: none;
  font-family: THCFontSemiBold;
  color: #f3ac3f;
  font-weight: bold;
}

.navmenu li ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
  z-index: 1;
  background: green;
  top: -1px;
  left: 35px;
  display: none;
}

.navmenu li ul li {
  float: none;
  text-align: left;
}

.navmenu li ul a {
  display: block;
  text-align: left;
}
.navmenu li:hover ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navmenu">
  <li><a href="#">Main 1</a></li>
  <li><a href="#">Main 2</a></li>
  <li>
    <a href="#">Main 3</a>
    <ul id="mnu_services_drop">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2 </a></li>
      <li><a href="#">Sub 3</a></li>
      <li><a href="#">Sub 4</a></li>
    </ul>
  </li>
  <li><a href="#">Main 4</a></li>
  <li><a href="#">Main 5</a></li>
  <li><a href="#">Main 6</a></li>
  <li><a href="#">Main 7</a></li>
</ul>