CSS 下拉菜单 - 单击时保持 HOVER 状态

Question

我有一个 CSS 下拉菜单...

我在我网站的某个部分对此所做的是，我正在使用它的链接来调用 AJAX-jQuery 来更改页面上 DIV 的内容而无需重新加载...

<script type="text/javascript">
function load_editor(id) 
{
  $('#myDIV').load('editor.php?id=' + id);
}
</script>

<div class="mainmenu">
<ul>
  <li class="li_nc"><a href="javascript:load_editor('1')">Home</a></li>
  <li class="li_hc"><a href="#"  >Programs</a><ul class="ul_ch">
  <li class="li_hc"><a href="#"  >Engineering</a><ul class="ul_ch">

    <li class="li_nc"><a href="javascript:load_editor('2')"  >BEE ( Electronics 4 Years )</a></li>
    <li class="li_nc"><a href="javascript:load_editor('3')"  >BEE ( Tele Comm. 4 Years )</a></li>
    <!--and the following code is the usual CSS Drop Down Menu Code-->

通常当我们单击下拉菜单时...我们导航到另一个页面但因为我没有切换到另一个页面...

当我点击一个菜单项时会发生什么，它执行 JS 但不折叠，也就是说，它停留在 HOVER STATE

以下是点击后的屏幕截图

这是合乎逻辑的，因为光标仍然存在，当我将光标 OUT 移动时，它会回到折叠状态，但我想改变它的行为，以便当我点击它时它会折叠.. .

一种方法是，当我单击并使用所需的 div 加载 #myDIV 时...我自己加载下拉菜单层（重新加载）...

但我正在寻找替代方案

所以我的问题很简单

• 使 CSS 下拉菜单在单击时折叠

Answer 1

您可以使用 .focus 函数将焦点设置到其他位置，以便浏览器移除您的悬停。比如：

document.getElementById("body").focus()

如果你使用 jquery：

$("#element_id").focus();