首页新闻找找看学习计划

基于jQuery设计下拉导航栏出现奇怪现象

0
悬赏园豆:30 [已解决问题] 解决于 2014-04-27 20:14

基于jquery2.1.0.min.js

平台:windows7  chrome 33.0.1750.154 m 、firefox27.0.1

期望功能:实现单击下拉的效果。

问题:单击下拉子菜单已经实现,但是在单击事件发生的时候出现了奇怪现象

  1. 刚开始加载页面是这样子的:
  2. 此时单击”水果“,是出现这样的:

 

  3. 在第2步的基础上还是单击已经展开的“水果”字样,是这样的:

 4. 如果是在第2步的基础上(不进行第3步操作),单击除“水果”字样的其它列表,如“体育”或“性格”这是这样的:

 

  问题:仔细看各个效果图,导航栏列表随着点击展开子列表的同时,会发生跳动,而且根据单击的是不是已经展开的列表还是未展开的列表的情况,跳动情况还不一致,囧=。=根据我分析肯定是css布局出问题,可是找不出来,希望有人指教下,thx。

代码如下:(运行时别忘了导入jQuery)

<!doctype html>
<html>
    <head>
        <title>导航栏</title>
        <script src="jquery-2.1.0.min.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            a {
                text-decoration: none;
            }
            ul li {
                list-style-type: none;
            }
            nav {
                text-align: center;
                margin-top: 0px;
            }
            .menu {
                margin-top: 40px;
                font-size:0;            /* 所有浏览器 */
                *word-spacing:-1px;        /* IE6、7 */
            }
            .level1 {
                font-size: 12px;
                display: inline-block;
                *display:inline; 
                *zoom:1; 
            }
            .list-item {
                padding: 0px 40px;
                background: blue;
                border: 1px solid black;
                color: white;
            }
            .level2 {
                display:none;
            }
            .level2 li:hover {
                background: red;
                border: black;
                color: white;
            }
        </style>
        <script>
            $(function() {
                $(".list-item").click(function() {
                    var $clickObject = $(this);
                    $clickObject.parents(".level1").siblings().children("ul").hide();
                    $clickObject.parent(".level1").siblings().children("ul").hide();
                    var $showList = $clickObject.siblings("ul")
                    if($showList.css("display") == "none") {
                        $showList.show();
                        $showList.children("li").css("border","0.5px solid blue");
                    }else {
                        $showList.hide();
                    }
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <header>
            <nav>
                <ul class="menu">
                    <li class="level1">
                        <a class="list-item">水果</a>
                        <ul class="level2">
                            <li><a href="">葡萄</a></li>
                            <li><a href="">橙子</a></li>
                            <li><a href="">火龙果</a></li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a class="list-item">体育</a>
                        <ul class="level2">
                            <li><a href="">游泳</a></li>
                            <li><a href="">羽毛球</a></li>
                            <li><a href="">跑步</a></li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a class="list-item">性格</a>
                        <ul class="level2">
                            <li><a href="">开朗</a></li>
                            <li><a href="">随和</a></li>
                            <li><a href="">执着</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <section></section>
        <footer></footer>
    </body>
</html>

 

gyy_Jade的主页 gyy_Jade | 初学一级 | 园豆:111
提问于:2014-03-17 19:38
< >
分享
最佳答案
0

没懂起你的意思,不过猜想应该是定位问题  .level2 {  position:absolute;    }

收获园豆:30
yyutudou | 小虾三级 |园豆:997 | 2014-03-17 20:51

是的,是定位问题。应该是display的改变影响到了布局。(主要是:display:none和visibility:hidden的区别。)

解决方案一:可以将将display:none改为visibility:hidden来解决;

解决方案一:像你猜想的,改为了position:absolute,但是这样不知道为什么就出现另一个问题了(任何css或html都没有改变,只是将.level2改为absolute的定位),子菜单的宽度不再和项一致,而是根据文字的长短自适应。~如果不是限定子菜单长度的具体数值,怎么保持和选项的长度一致?

gyy_Jade | 园豆:111 (初学一级) | 2014-03-17 21:12

@Iwillknow: 为什么要用padding: 0px 40px;来控制宽度,直接设置li的width呀

yyutudou | 园豆:997 (小虾三级) | 2014-03-17 21:16

@yuyangtudou: 我知道你什么意思呢,谢谢^_^~是我整个css设计的不合理招致了很多不必要的麻烦,不过解决问题的时候学到很多东西~~万分感谢

gyy_Jade | 园豆:111 (初学一级) | 2014-03-17 21:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册