显示/隐藏非父元素和子元素时，悬停将不起作用

发布于 2024-11-06 01:01:18 字数 671 浏览 0 评论 0原文

我有这样的代码

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
<ul>

，但我希望“mainlink2”有一个子菜单，我不想像子菜单一样放置它，因为当我将子菜单设置为“绝对”时，我无法将其宽度适合屏幕，并且中心，所以我在“ul”之外创建一个 div，如下所示...

 <div>
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

当我调用 javascript .hover 时，我看不到子菜单。我尝试通过记住主菜单的索引来将类添加到“子菜单”，当它匹配时，我添加类以显示子菜单，当不悬停时，我删除类。但是当我将鼠标从主菜单中离开时，悬停功能无法执行此操作，子菜单将隐藏。

原文

I have a code like this

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
<ul>

but i want the 'mainlink2' has a submenu, I don't want to place it like child because when i set the submenu to be 'absolute' i can't fit its width to the screen and be the center so i create a div outside the 'ul' like this ...

 <div>
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

when i call javascript .hover i can't see the submenu. i try to add a class to "submenu" by remember the index of mainmenu and when it match i add class to show the submenu, when not hover i remove class. But the hover function can't do this when i leave a mouse from main menu the submenu is hide.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无所的.畏惧 2024-11-13 01:01:18

试试这个：

HTML：

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li class="mainlink2"><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
</ul>

<div class="submenu" style="position:absolute;background:#ddd; margin-left:-250px;left:50%;display:none;width:500px">
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

JQUERY：

$(function(){

    $('.mainlink2').mouseenter(function(){
        $('.submenu').show(500);
    }).mouseleave(function(){
        $('.submenu').hide(500);
    });

});

Try this:

HTML:

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li class="mainlink2"><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
</ul>

<div class="submenu" style="position:absolute;background:#ddd; margin-left:-250px;left:50%;display:none;width:500px">
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

JQUERY:

$(function(){

    $('.mainlink2').mouseenter(function(){
        $('.submenu').show(500);
    }).mouseleave(function(){
        $('.submenu').hide(500);
    });

});

回复收藏 0 原文

~没有更多了~