Question

亲爱的，我正在使用megamenu我只是编写代码而不是下载并添加代码。我只是在菜单悬停上显示显示mega菜单div的代码。它工作正常但我遇到了问题。在悬停一个div后显示，但它无法在巨型菜单中选择内容。我不知道如何在jquery中编写代码，当它悬停列表时它也允许选择内容。当我在光标移动时尝试将其悬停在向下的megamenu中时，它正在隐藏。

我的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

任何人都可以解决我的问题。

Answer 1

首先尝试使用嵌套的li并使用css设置它，因此它看起来像下拉列表而不是悬停div因为当前你的代码说在悬停时显示这个div没有代码说它实际上是一个下拉列表或可选择的div和当你将光标移开时它就会消失

Answer 2

最好这样做并删除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;
}

list hover megamenu隐藏无法选择

2 个答案: