Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

My Fiddle is Here

Answer 1

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

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

＆＃13;

$("#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);
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

导航子菜单的问题不再出现

1 个答案: