代码之家 › 专栏 › 技术社区 › b. e. hollenbeck

使用无序列表的jquery下拉导航

javascript-events jquery javascript

b. e. hollenbeck · 技术社区 · 16 年前

我正在尝试使用jquery进行导航下拉列表,如下所示:

<ul id="home" >
    <li class="navtab"><a href="#">TABANME</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
</ul>

这个 <li> .navtab始终可见-子菜单项开始隐藏。我已将.hover()附加到 <ul> 元素(home),但当光标进入子菜单时 <理工大学; 元素、用于家庭火灾的鼠标输出和隐藏的子菜单项。

我知道这与事件冒泡和鼠标悬停/鼠标悬停有关,但我不知道当鼠标悬停在整个菜单上时如何保持菜单打开的逻辑。 <UL & GT; .我目前拥有的jquery是:

    $('#thome').hover(
        function(){
           tabShowSubnav($(this).attr('id'))
        },
        function(){
           tabHideSubnav($(this).attr('id'))
        });

function tabShowSubnav(menu){

var tb = '#' + menu;
var sb = '.' + menu.slice(1) + 'sub';

$(tb).css('height','239px');
$(sb).show();
}

有什么建议吗?

1 回复 | 直到 16 年前

cletus 16 年前

帮自己一个大忙,把菜单标记的结构改为:

<ul id="home" >
  <li class="navtab">
    <a href="#">TABANME</a>
    <ul class="submenu">
      <li><a href="#">Some link</a></li>
      <li><a href="#">Some link</a></li>
      <li><a href="#">Some link</a></li>
    </ul>
  </li>
</ul>

并将鼠标悬停事件放在li.navtab上,使子菜单可见。你会找到这个的 许多的 更容易做。例如,CSS:

ul.submenu { display: none; }

用:

$(function() {
  $("li.navtab").hover(function() {
    $(this).children("ul.submenu").show();
  }, function() {
    $(this).children("ul.submenu").hide();
  });
});

你是最重要的。

所有人都这么说,我会的。 高度地 建议使用现有的jquery菜单插件。这方面有很多。我有过比较好的经验 superfish . 改造这个特殊的轮子没什么意义。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前