1. 爱易网页
  2. JavaSript
  3. 施用jquery作一个纵向菜单，超级链接为何失效？

施用jquery作一个纵向菜单，超级链接为何失效？

日期：2014-05-16　 浏览次数：20357 次

使用jquery作一个纵向菜单，超级链接为何失效？？
HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页</title>

    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $("#menu li").toggle(
    function(){$(this).children("ul").slideDown(100)},
    function(){$(this).children("ul").slideUp(100)}
    );
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    
            <div id="left">
                <ul id="menu">
                    <li><a href="#">友情链接</a>
                        <ul>
                            <li><a href="http://www.baidu.com">百度</a></li>
                            <li><a href="http://www.sina.com.cn">新浪</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            
      
    </form>
</body>
</html>


点击链接百度、新浪，没有任何反应。如果将toggle换成hover，则一切正常。

请问高手们，如果用toggle,该如何解决？

------解决方案--------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>无标题页</title>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#menu>li>a").toggle(
function(){$(this).next().slideDown(100)},
function(){$(this).next().slideUp(100)}
);
});
</script>
</head>
<body>
<form id="form1" runat="server">

<div id="left">
<ul id="menu">
<li><a href="javascript:;">友情链接</a>
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com.cn">新浪</a></li>
</ul>
</li>
</ul>
</div>


</form>
</body>
</html>

相关资料更多>

  1. Javascript兑现的遮罩层
  2. 简单化 Ajax 和 Java 开发，第 1 部分: 用 JSP 标记文件动态生成 JavaScript 代码
  3. jq批改datalist里面某个a标签的href
  4. JavaScript浮点运算的有关问题
  5. JS：请问关于块级作用相关
  6. 初学者，请老程序人给看看，以下的ＪＳ哪错了。好了立即给分
  7. 轻量级的jQuery表单印证插件 - HAPPY.js
  8. JSP之EL(四)
  9. 转:超级适用且不花哨的js代码大全