js闭包实际应用问题

xiao_song_shu 2017-12-09 10:16:46

最终实现：想做一个类似于下拉菜单的下拉表，先将多个li用css隐藏（即二级菜单），再通过js动态显示。
问题：刚开始写的时候无论点击哪一个li，只能显示第一个的，网上搜索后决定使用闭包，但是还是失败，以下代码是想用来测试js闭包能否实现的，结果是不行。然后具体的实现代码也是实现不了，所以我就没贴出来了。。。
期望：能帮我看看代码的错误点，以及二级菜单怎么实现比较好。js新手，所以很多不懂，麻烦各位了。。。。。

...全文

178 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiao_song_shu 2017-12-10

打赏
举报

可以实现，谢谢，剩下的我自己理解一下，谢谢。

天际的海浪 2017-12-10

打赏
举报


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
    #test ul{
        display: none;
    }
    </style>
</head>
<body>
    <ul id="test">  
        <li>这是第一条
        <ul>
            <li>1</li>
            <li>2</li> 
            <li>3</li> 
            <li>4</li> 
        </ul>  
        </li>
        <li>这是第二条
        <ul>
            <li>5</li>
            <li>6</li> 
            <li>7</li> 
            <li>8</li> 
        </ul>  
        </li>
        <li>这是第三条
        <ul>
            <li>9</li>
            <li>10</li> 
            <li>11</li> 
            <li>12</li> 
        </ul>  
        </li>
    </ul>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#test li:has(ul)").click(function(){
		$(this).children("ul").slideToggle(300);
	});
	$("#test ul").click(false);
});
</script>  
</body>
</html>

囧 2017-12-09

打赏
举报

你的代码呢?

xiao_song_shu 2017-12-09

打赏
举报

这是我初步写的，但是实现不了。。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .anotherMenu { display: none; } </style> </head> <body> <ul id="test"> <li>这是第一条</li> <li class="anotherMenu" id="anotherMenu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>这是第二条</li> <li class="anotherMenu" id="anotherMenu"> <ul> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </li> <li>这是第三条</li> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function $(currentId) { return document.getElementById(currentId); } var list = $("test").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].onclick = (function(x) { return function() { //alert(x); //alert($("#anotherMenu"));显示null //alert(document.getElementById('anotherMenu'));显示object对象 if($("#anotherMenu").css("display")=="none") { //alert(x); $("#anotherMenu").css("display","block"); //alert(1); } else { $("#anotherMenu").css("display","none"); } } })(i); } </script> </body> </html>

xiao_song_shu 2017-12-09

打赏
举报

谢谢，确实这样，另外可以麻烦说一下二级菜单的实现思路吗？或者我贴一下我写的代码？

天际的海浪 2017-12-09

打赏
举报

另外你自定义的function $(id) 函数，与jquery的对象冲突，建议改名

天际的海浪 2017-12-09

打赏
举报

代码没问题，只是要把js代码放到所有html元素的下面

xiao_song_shu 2017-12-09

打赏
举报

不好意思，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <script language="javascript" type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function $(id) { return document.getElementById(id); } var list = $("test").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].onclick = (function(x) { return function() { //实现菜单代码 alert(x); } })(i); } </script> <style type="text/css"> .anotherMenu { display: none; } </style> </head> <body> <ul id="test"> <li>这是第一条</li> <li class="anotherMenu" id="anotherMenu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>这是第二条</li> <li class="anotherMenu" id="anotherMenu"> <ul> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </li> <li>这是第三条</li> </body> </html>

JS闭包可被利用的常见场景。值得保留的文档。值得一看

呃，其实大部分情况下是可以的，而有些方面还是令人非常的困扰，下面慢慢道来。很多语言的都提供了非常优雅和漂亮的操作数组的方法。在下面的例子中，会使用 PHP5.3 以及其他语言提供的闭包功能，用于展示如何“客观的”操作迭代数组。译注：原文作者比较火星，我不了解 Groovy 以及 Scala 语言，所以这里我加上 Javascript 的实现。在开始之前先说明下，本例子仅仅是阐明观点，并没有考虑性能等其他方面的因素。 “货比三家” 用个简单的例子开始，有下面个数组： $nums = array(10, 20, 30, 40);需要找出数组中大于 15 的项。那么，不考虑闭包的情况下，我们或

本课程介绍什么是闭包，闭包有哪些使用场景，常见的使用错误。