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 移动时，它将返回到崩溃状态，但我想改变它的行为，这样当我点击它时会折叠..

一种方式是，当我点击并#myDIV加载了所需的div ...我自己加载下拉菜单图层（重新加载）......

但我正在寻找替代方案

所以我的问题用简单的话说

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

Answer 1

您可以使用.focus功能将焦点设置到其他位置，以便浏览器删除您的悬停。类似的东西：

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

如果你使用jquery：

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