列表悬停大菜单隐藏无法选择

list hover megamenu hiding not able to select

本文关键字：选择 隐藏 菜单 悬停 列表      更新时间：2023-09-26

嗨，亲爱的，我正在使用megamenu，我只是写了一个代码，而不是下载和添加代码。我只是为在菜单悬停上显示megamenudiv写了代码。它工作得很好，但我遇到了问题。悬停一个div后显示，但无法在mega菜单中选择内容。当悬停它允许选择内容的列表时，我不知道如何在jquery中编写代码。当我试图在向下的大菜单中悬停时，当光标移动时，它就隐藏了。

MY HTML代码

 <div class="menu">
        <ul>
          <li><a href="#" class="tech">Chipsets</a></li>
          <li><a href="#" class="tech">Wireless Modules</a></li>
          <li><a href="#" class="tech">Divices & Services</a></li>
          <li><a href="#" class="tech">IP Licensing</a></li>
          <li><a href="#" class="tech">Technology</a></li>
        </ul>
      </div>
    <div class="megamenu">Content here11.Services..1</div>
<div class="megamenu">Content here222.Training..2</div>
<div class="megamenu">Content here..Communities.3</div>
<div class="megamenu">Content here..Store.4</div>
<div class="megamenu">Content here..Store.5</div>

JQuery代码

$('.tech').hover(function(){
            divTrigger = $('.tech').index(this);            
         $('.megamenu:eq('+divTrigger+')').show();
    },function(){
         $('.megamenu:eq('+divTrigger+')').hide();      
        });

JSBIN链接http://jsbin.com/IyUhUYi/2/edit

谁能解决我的问题吗。

首先尝试使用嵌套的li，并用css对其进行样式设置，使其看起来像一个下拉列表，而不是悬停div，因为目前您的代码说，在悬停显示此div时，没有代码说它实际上是一个下拉或可选择的div，当您移开光标时，它只会离开

最好这样做并删除jquery

<div class="menu">
        <ul>
          <li><a href="#" class="tech">Chipsets</a>
             <div class="megamenu">Content here11.Services..1</div>
          </li>
          <li><a href="#" class="tech">Wireless Modules</a>
              <div class="megamenu">Content here222.Training..2</div>
          </li>
          ....
        </ul>
      </div>

并使用这个css

.menu ul li div
{
   display:none;
}
.menu ul li:hover div
{
    display:block;
}
相关文章：