jquery请教3！谢谢！

lvyichang 2011-08-02 02:06:38

html代码：

        <ul  id="mainmenu">

            <li>菜单一

                <ul >

                    <li><a href="#">子菜单11</a></li>

                    <li><a href="#">子菜单12</a></li>

                    <li><a href="#">子菜单13</a></li>

                </ul>

            </li>

            <li>菜单二

                <ul  >

                    <li><a href="#">子菜单21</a></li>

                    <li><a href="#">子菜单22</a></li>

                </ul>

            </li>

            <li>菜单三

                <ul >

                    <li><a href="#">子菜单31</a></li>

                    <li><a href="#">子菜单32</a></li>

                </ul>            

            </li>

        </ul>

jquer代码：

        $(document).ready(function() {

            $("#mainmenu>li ul").hide();



            $("#mainmenu li").click(function() {

                $("#mainmenu li ul").hide();

                $(this).find("ul").show();

            });

        });

问题：
以上是点击li弹出下一级的ul,但弹出后怎样点击原来的使其关闭？？
要求不改动html代码！
先谢谢了！！

...全文

240 34 打赏收藏转发到动态举报

写回复

用AI写文章

34 条回复

切换为时间正序

请发表友善的回复…

发表回复

truecoffeefox 2011-08-02

打赏
举报

结的蛮快的啊，转圈回来就完啦，哈哈

        $(document).ready(function () {

            $("#mainmenu>li ul").hide();

            $("#mainmenu>li").click(function () {

                $("#mainmenu>li").each(function (i, item) {

                    if ($(this).find("ul").css("display") != "none") {

                        $(this).find("ul").hide();

                    }

                });

                $(this).find("ul").show();

            })

        })

lvyichang 2011-08-02

打赏
举报

又看了一下，除27楼可以外，31楼liuchaolin也可以！
十分十分感谢！！

lvyichang 2011-08-02

打赏
举报

dongxinxi代码终于行了！十分十分感谢dongxinxi大哥！！
28楼代码还是有问题，点击子菜单若没连接的话，子菜单就消失了！
结贴感谢大家的帮助！

md5e 2011-08-02

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <script type="text/javascript" src="Configuration/js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#mainmenu>li>ul").hide();

			var over;

            $("#mainmenu li").click(function(){

				if(over!=null&&over!=this) $(over).find("ul").hide();

				over=this;

                $(this).find("ul").toggle(); 



            })         

        })

    </script>

</head>

<body>

 <ul  id="mainmenu">

            <li>菜单一

                <ul>

                    <li><a href="#">子菜单11</a></li>

                    <li><a href="#">子菜单12</a></li>

                    <li><a href="#">子菜单13</a></li>

                </ul>

            </li>

            <li>菜单二

                <ul  >

                    <li><a href="#">子菜单21</a></li>

                    <li><a href="#">子菜单22</a></li>

                </ul>

            </li>

            <li>菜单三

                <ul >

                    <li><a href="#">子菜单31</a></li>

                    <li><a href="#">子菜单32</a></li>

                </ul>            

            </li>

        </ul>



</body>

</html>

不加span

IE11下面经常卡到爆 2011-08-02

打赏
举报

看下27#

lvyichang 2011-08-02

打赏
举报

测试25楼！
不行！
1.点击子菜单后，子菜单小时了！
2.有时点主菜单要点两下哦！（点过子菜单）！

huangwenquan123 2011-08-02

打赏
举报

点击打开新窗口



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#mainmenu>li>ul").hide();

            $("#mainmenu>li").click(function(){

                $(this).find("ul").toggle();

                $(this).siblings().find("ul").hide();

            })     

            $("#mainmenu>li>ul>li").click(function(){

                  window.open($(this).find("a").attr("href"),"_blank");

                  return false;

            })             

        })

    </script>

</head>

<body>

 <ul  id="mainmenu">

            <li>菜单一

                <ul>

                    <li><a href="http://www.baidu.com" target="_blank">子菜单11</a></li>

                    <li><a href="#">子菜单12</a></li>

                    <li><a href="#">子菜单13</a></li>

                </ul>

            </li>

            <li>菜单二

                <ul>

                    <li><a href="#">子菜单21</a></li>

                    <li><a href="#">子菜单22</a></li>

                </ul>

            </li>

            <li>菜单三

                <ul>

                    <li><a href="#">子菜单31</a></li>

                    <li><a href="#">子菜单32</a></li>

                </ul>            

            </li>

        </ul>



</body>

</html>

IE11下面经常卡到爆 2011-08-02

打赏
举报



 $(document).ready(function() {

        var uls = $("#mainmenu>li ul");

        uls.hide();



        $("#mainmenu li").click(function(event) {

            var curUL = $(this).find("ul");

            uls.not(curUL).hide();

            if (curUL.length > 0) {

                //防止点击子元素时隐藏UL

                curUL.click(function(event) { event.returnValue = false; });

                curUL.toggle();

            }

        });

    });

因为把事件冒泡关掉了，上面关错了地方

lvyichang 2011-08-02

打赏
举报

嘿liuchaolin兄弟，你还是加了<span>哦！

truecoffeefox 2011-08-02

打赏
举报

未改html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#mainmenu>li ul").hide();

            $("#mainmenu>li").toggle(function () {

                $("#mainmenu>li").each(function (i, item) {

                    $(this).find("ul").hide();

                });

                $(this).find("ul").show();

            }, function () {

                $(this).find("ul").hide();

            })



        })

    </script>

</head>

<body>

    <ul id="mainmenu">

        <li>菜单一

            <ul>

                <li><a href="#">子菜单11</a></li>

                <li><a href="#">子菜单12</a></li>

                <li><a href="#">子菜单13</a></li>

            </ul>

        </li>

        <li>菜单二

            <ul>

                <li><a href="#">子菜单21</a></li>

                <li><a href="#">子菜单22</a></li>

            </ul>

        </li>

        <li>菜单三

            <ul>

                <li><a href="#">子菜单31</a></li>

                <li><a href="#">子菜单32</a></li>

            </ul>

        </li>

    </ul>

</body>

</html>

md5e 2011-08-02

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <script type="text/javascript" src="Configuration/js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#mainmenu>li>ul").hide();

			var over;

            $("#mainmenu>li>span").click(function(){

				if(over!=null&&over!=this) $(over).siblings().hide();

				over=this;

                $(this).siblings().toggle(); 



            })         

        })

    </script>

</head>

<body>

 <ul  id="mainmenu">

            <li><span>菜单一</span>

                <ul>

                    <li><a href="#">子菜单11</a></li>

                    <li><a href="#">子菜单12</a></li>

                    <li><a href="#">子菜单13</a></li>

                </ul>

            </li>

            <li><span>菜单二</span>

                <ul  >

                    <li><a href="#">子菜单21</a></li>

                    <li><a href="#">子菜单22</a></li>

                </ul>

            </li>

            <li><span>菜单三</span>

                <ul >

                    <li><a href="#">子菜单31</a></li>

                    <li><a href="#">子菜单32</a></li>

                </ul>            

            </li>

        </ul>



</body>

</html>

这样可以了

lvyichang 2011-08-02

打赏
举报

哦哦！
测试了20楼huangwenquan123的代码，
也是点击子菜单的url链接无反应啊！！
如果有：<li><a href="HTMLPage5.htm">子菜单11</a></li>

lvyichang 2011-08-02

打赏
举报

测试了17楼dongxinxi的代码！
如果子菜单有url链接，点击就无反应啊！！
如：<li><a href="HTMLPage5.htm">子菜单11</a></li>
点击没反应！！
望继续赐教！！

IE11下面经常卡到爆 2011-08-02

打赏
举报

你的Html很规范，所以不用改的

huangwenquan123 2011-08-02

打赏
举报

不能改动的话就给最里面的li加个事件，这样点击最里面的li不会关闭，不过点击旁边空白的话还是一样。因为是包裹在li下面。



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#mainmenu>li>ul").hide();

            $("#mainmenu>li>ul>li").click(function(){

                return false;

            })    

            $("#mainmenu>li").click(function(){

                if($(this).find("ul").css("display")=="none")

                    $(this).find("ul").css("display","block");

                else

                    $(this).find("ul").css("display","none");

                $(this).siblings().find("ul").hide();

            })              

        })

    </script>

</head>

<body>

 <ul  id="mainmenu">

            <li class="a">菜单一

                <ul>

                    <li><a href="javascript:void(0)">子菜单11</a></li>

                    <li><a href="javascript:void(0)">子菜单12</a></li>

                    <li><a href="javascript:void(0)">子菜单13</a></li>

                </ul>

            </li>

            <li class="a">菜单二

                <ul>

                    <li><a href="javascript:void(0)">子菜单21</a></li>

                    <li><a href="javascript:void(0)">子菜单22</a></li>

                </ul>

            </li>

            <li class="a">菜单三

                <ul>

                    <li><a href="javascript:void(0)">子菜单31</a></li>

                    <li><a href="javascript:void(0)">子菜单32</a></li>

                </ul>            

            </li>

        </ul>



</body>

</html>

lvyichang 2011-08-02

打赏
举报

还有再声明一下不能改动html代码！
liuchaolin也改动了代码，加了<span>

IE11下面经常卡到爆 2011-08-02

打赏
举报

var uls = $("#mainmenu>li ul");放在外面，这样不需要每次点的时候都去DOM里重新找

IE11下面经常卡到爆 2011-08-02

打赏
举报



$(document).ready(function() {

        var uls = $("#mainmenu>li ul");

        uls.hide();



        $("#mainmenu li").click(function(event) {            

            var curUL = $(this).find("ul");

            if (curUL.length > 0) {

                uls.not(curUL).hide();

                curUL.toggle();

            }

            return false;   //防止点击子元素时隐藏UL

        });

    });

测试通过

lvyichang 2011-08-02