jquery子菜单隐藏/显示，子菜单位于单独的div中

发布于 2024-11-27 17:32:55 字数 715 浏览 1 评论 0原文

如何在悬停时隐藏/显示不在原始触发器内的子菜单？

我有以下代码：

HTML

<ul>
  <li class="toggleTrigger" id="subMenu"><a href="#">header</a></li>
</ul>

<div class="subMenu">
  <p>hello!</p>
</div>

Javascript

function configFile() {
$('.toggleTrigger').hover(function () {
  var trigger = $(this).attr('id');
       target = '.'+trigger;
 $( target ).show();    
 }, function () {
     $( target ).hide();                
     });    
}

隐藏/显示正在工作。唯一的问题是，一旦我将鼠标悬停在远离触发器的位置，我的子菜单也会隐藏，因此我无法单击子菜单上的任何内容。

我不想将子菜单放在列表项中，因为它会弄乱我的 CSS。有没有办法仍然使我能够从触发器悬停到子菜单，并且只有当我离开这两个菜单时，子菜单才会隐藏？

感谢您的帮助！

原文

how can I hide/show a submenu on hover, which is not inside the original trigger?

I have the following code:

HTML

<ul>
  <li class="toggleTrigger" id="subMenu"><a href="#">header</a></li>
</ul>

<div class="subMenu">
  <p>hello!</p>
</div>

Javascript

function configFile() {
$('.toggleTrigger').hover(function () {
  var trigger = $(this).attr('id');
       target = '.'+trigger;
 $( target ).show();    
 }, function () {
     $( target ).hide();                
     });    
}

The hide/show is working. The only problem is once I hover away from the trigger, my subMenu is also hidden, so I cannot click anything on the submenu.

I don't want to put the submenu inside the list item because it messes up my CSS. Is there a way to still enable me to hover from trigger to submenu and only when I leave both, the submenu gets hidden?

Thanks for help!

分享到QQ

分享到微博