这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 下拉列表菜单的实现方法,采用 table 来封装,我们知道 table 的每一行写满了之后,下一行会自动添加,文章末尾附有完整的代码,需要的朋友可以参考下
之前写过这个《javascript 下拉列表中显示树形菜单的实现方法》菜单的体现,但是在写了之后就发现了,不太适合,高度要精准控制,并且还不是很好看。现在采用 table 来封装,我们知道 table 的每一行写满了之后,下一行会自动加,这个比之前我们自己制定高度好很多。 1、点击之后都可以并存的情况(只需函数写法不一样就可)dispaly 也是自己设置的,通过父节点来操作子节点,显示与否;
- /* function open1(node){
- //通过父节点来操作兄弟节点
- 当点击之后出现之后,直接就能打开但是要求在点开一个时候,其余的都关掉
- var nodes = node.parentNode;
- var nn = nodes.getElementsByTagName("ul")[0];
- with (nn.style) {
- display = (display == "block") ? "none" : "block";
- }
- }*/
- </script>
2、点击之后只允许打开一个,其余的都要关掉
- <script type="text/javascript">
- function list1(node){
- //这是要对全部操作,必须要得到所有的对象 (根据table 的id 来获得)
- //根据this判断,不是属于this,那么就关闭
- //alert("aa");
- //1,获得点击对象的值
- var nodes = node.parentNode;//传入当前的父节点
- var nn = nodes.getElementsByTagName("ul")[0];//得到当前的对象,要是遍历所有,与这个对象一样,就设置相反的情况,其余的全部关闭
- //2,获得全部对象
- var mm = document.getElementById("menuid");
- var names = mm.getElementsByTagName("ul");
- //3,开始一一配对
- for (var x = 0; x < names.length; x++) {
- /*这样写,可以简化,利用下面的方法
- if (names[x] == nn) {
- if (nn.className == "open2") {
- nn.className = "close2";
- }
- else {
- nn.className = "open2";
- }
- }else {
- nn.className = "close2";
- }*/
- if(names[x]==nn&&names[x].className!="open2"){
- nn.className="open2";
- }else{
- names[x].className="close2";
- }
- }
- }
- </script>
CSS 样式的编写:
- <style type="text/css">
- ul{
- list-style:none;
- margin:0px;
- padding:0px;
- }
- table{
- border:#00ff40 solid 1px;
- }
- table a{
- text-decoration:none;
- }
- table tr td ul{
- display:none;
- }
- .open2{
- display:block;
- background:#8080ff;
- }
- .close2{
- display:none;
- }
效果图(只能开一个的):
完整代码:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- qqMenu.html
- </title>
- <style type="text/css">
- ul{ list-style:none; margin:0px; padding:0px; } table{ border:#00ff40
- solid 1px; } table a{ text-decoration:none; } table tr td ul{ display:none;
- } .open2{ display:block; background:#8080ff; } .close2{ display:none; }
- </style>
- <script type="text/javascript">
- /* function open1(node){
- //通过父节点来操作兄弟节点
- 当点击之后出现之后,直接就能打开但是要求在点开一个时候,其余的都关掉
- var nodes = node.parentNode;
- var nn = nodes.getElementsByTagName("ul")[0];
- with (nn.style) {
- display = (display == "block") ? "none" : "block";
- }
- }*/
- </script>
- <script type="text/javascript">
- function list1(node) {
- //这是要对全部操作,必须要得到所有的对象 (根据table 的id 来获得)
- //根据this判断,不是属于this,那么就关闭
- //alert("aa");
- //1,获得点击对象的值
- var nodes = node.parentNode; //传入当前的父节点
- var nn = nodes.getElementsByTagName("ul")[0]; //得到当前的对象,要是遍历所有,与这个对象一样,就设置相反的情况,其余的全部关闭
- //2,获得全部对象
- var mm = document.getElementById("menuid");
- var names = mm.getElementsByTagName("ul");
- //3,开始一一配对
- for (var x = 0; x < names.length; x++) {
- /*这样写,可以简化,利用下面的方法
- if (names[x] == nn) {
- if (nn.className == "open2") {
- nn.className = "close2";
- }
- else {
- nn.className = "open2";
- }
- }else {
- nn.className = "close2";
- }*/
- if (names[x] == nn && names[x].className != "open2") {
- nn.className = "open2";
- } else {
- names[x].className = "close2";
- }
- }
- }
- </script>
- <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
- </head>
- <body>
- <table id="menuid">
- <tr>
- <td>
- <!--<a href="javascript:void(0)" onclick="open1(this)">同事栏</a>-->
- <a href="javascript:void(0)" onclick="list1(this)">
- 同事栏
- </a>
- <ul>
- <li>
- 同事1
- </li>
- <li>
- 同事2
- </li>
- <li>
- 同事3
- </li>
- <li>
- 同事4
- </li>
- </ul>
- </td>
- </tr>
- <tr>
- <td>
- <!--<a href="javascript:void(0)" onclick="open1(this)">同学栏</a>-->
- <a href="javascript:void(0)" onclick="list1(this)">
- 同学栏
- </a>
- <ul>
- <li>
- 同学1
- </li>
- <li>
- 同学2
- </li>
- <li>
- 同学3
- </li>
- <li>
- 同学4
- </li>
- </ul>
- </td>
- </tr>
- <tr>
- <td>
- <!--<a href="javascript:void(0)" onclick="open1(this)">黑名单栏</a>-->
- <a href="javascript:void(0)" onclick="list1(this)">
- 黑名单栏
- </a>
- <ul>
- <li>
- 黑名单同学1
- </li>
- <li>
- 黑名单同学2
- </li>
- <li>
- 黑名单同学3
- </li>
- <li>
- 黑名单同学4
- </li>
- </ul>
- </td>
- </tr>
- </table>
- </body>
- </html>
相信大家通过这两篇文章的介绍应该有了大概的思路,小编的这篇文章有些制作的效果略微简陋,大家可以再进一步的完善。
来源: http://www.phperz.com/article/17/0408/268649.html