问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何判断做到当当前栏目下的子栏目显示时，其它栏目的子栏目是隐藏的，且其它栏目都是隐藏的话，当前栏目保持显示！

头像
_ThinkPad
    20852431

    不好意思，标题有点长
    有demo 看这里 效果演示

    首先每个导航栏目下都有子栏目，我想实现效果是，当移动到每个栏目时，显示其子栏目，并且移开时，保持不变（就是还是显示着） 然后移到其它导航栏目时，原先一直保持显示的应该隐藏，在显示当前栏目下的子栏目，以此类推的样子，

    如果有描述不好的地方，请多多指教，谢谢

    jquery
    阅读 3k
    1 个回答
    得票最新
    头像
    kikong
      19.1k31320
      ✓ 已被采纳
      $('div#nav').on("mouseover","ul.ul li",function(){
    $(this).find('ul').show();
    $(this).siblings().find('ul').not($(this)).hide();
});

      默认已经有一导航栏目下的子栏目（可以是1 2 3 4子栏目随机一个）是显示着，其它情况不变，然后实现当没有鼠标移入时，返回原先默认的导航显示子栏目

      <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <style>

        *{margin: 0;padding: 0;}
        body{font-family: 'Microsoft YaHei';font-size: 14px;}
        ul{list-style-type:none;}
        #nav{width:960px;margin: 50px auto;position: relative;}
        #nav .ul{height:30px;}
        #nav .ul > li{width:20%;height: 30px;text-align: center;border:1px solid green;line-height: 30px;
            float: left;margin: 0 5px;
        }
        /*新加的样式*/
        #nav .ul > li.selected{background: green;}
        #nav .ul > li.selected >a{color:#fff;}

        #nav ul li a{display: block;text-decoration: none;color:green;}
        #nav ul li a:hover{background: green;color:#fff;}
        .child-ul-1{width: 100%;position: absolute;left:0;z-index: 999;display: none;}
        .child-ul-1 > li{display: inline-block;vertical-align: middle;padding:0 15px;cursor: pointer;}

    </style>
    <script>

        $(function(){

            $('div#nav').on("mouseover","ul.ul li",function(){
                $(this).siblings().removeClass("selected");
                $(this).find('ul').show();
                $(this).siblings().find('ul').not($(this)).hide();

            });
            $('div#nav .ul').on("mouseout",function(){
                console.log('mouseout');
                var defaultLi=$(this).find('li[data-status=defaultSelectd]');
                $(defaultLi).mouseover();
                $(defaultLi).addClass("selected");

            });
        });

    </script>
</head>
<body>

<div id="nav">
    <ul class="ul">
        <li data-status="defaultSelectd"  class="selected">
            <a href="#" >关于我们</a>
            <ul class="child-ul-1" style="display:block" >
                <li>故事的角色</li>
                <li>199年</li>
                <li>天大地大</li>
            </ul>
        </li>
        <li><a href="#">首页</a>
            <ul class="child-ul-1">
                <li>故事的角色</li>
                <li>一无所有</li>
                <li>伤心1999</li>
            </ul>
        </li>
        <li><a href="#">教程</a>
            <ul class="child-ul-1">
                <li>走天涯</li>
                <li>别问我是谁</li>
                <li>天大地大</li>
            </ul>
        </li>
        <li><a href="#">活动</a>
            <ul class="child-ul-1">
                <li>爱海</li>
                <li>请别在</li>
                <li>经典歌曲</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题