js中下拉菜单问题求助了

大师兄在取经 2012-08-23 03:29:22
由于刚学js,不少例子中语句看不明白，向各位请教了。js代码中注有？？？？？号的地方


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScript Sample</title>

<style type="text/css">

<!--

#mainNav {

	position: absolute;

	top:2px;

	height:30px;

	width:800px;

}

.mainItem {

	position: absolute;

	top:3px;

	height:27px;

	width:74px;

	padding:10px 0px;

	margin:0px;

	text-align:center;

	font-size:13px;

	background-image: url(images/tab1.gif);

	background-repeat:repeat-x;

}

.subItemNav {

	position: absolute;

	top: 30px;

	left: 0px;

	width: 100%;

	height: 20px;

	padding: 2px 0px 0px 100px;

	visibility: hidden;

	background-color:#61B38B;

}

.subItemNav a:link, .subItemNav a:visited {

	font-size: 80%;

	color: #ffffff;

}

.subItemNav a:hover {

	color: #cccccc;

}

</style>

</head>



<body onmousemove="closeAllSubItem(event);">

<div id="headerNav">

      <div id="mainNav">

                <div id="mainItem1" class="mainItem"

                         onmouseover="displaySubItem(this);">开发王</div>

                <div id="mainItem2" class="mainItem"

                         onmouseover="displaySubItem(this);">最佳拍档</div>

                <div id="mainItem3" class="mainItem"

                         onmouseover="displaySubItem(this);">Flash</div>

                <div id="mainItem4" class="mainItem"

                         onmouseover="displaySubItem(this);">简体中文</div>

                <div id="mainItem5" class="mainItem"

                         onmouseover="displaySubItem(this);">繁体中文</div>

                <div id="mainItem6" class="mainItem"

                         onmouseover="displaySubItem(this);">其它语言</div>

      </div>    

      <div id="subMenu1" class="subItemNav">

        <a href="#">HTML</a> | 

        <a href="#">CSS</a> | 

        <a href="#">JavaScript</a> | 

        <a href="#">ASP</a> | 

        <a href="#">ASP.NET(VB)</a> | 

        <a href="#">ASP.NET(C#)</a> | 

        <a href="#">JSP</a> | 

        <a href="#">PHP</a>

      </div>

      <div id="subMenu2" class="subItemNav">

        <a href="#">HTML/CSS/JavaScript</a> | 

        <a href="#">ASP</a> | 

        <a href="#">ASP.NET(VB)</a> | 

        <a href="#">ASP.NET(C#)</a> | 

        <a href="#">JSP</a> | 

        <a href="#">PHP</a>

      </div>

      <div id="subMenu3" class="subItemNav">

        <a href="#">动画王</a> | 

        <a href="#">开发王</a> | 

        <a href="#">FMS</a> | 

        <a href="#">Flash Player：The Missing Manual</a> | 

        <a href="#">ASP.NET for Flash</a> | 

        <a href="#">ASP for Flash</a> | 

        <a href="#">JSP for Flash</a> | 

        <a href="#">PHP for Flash</a>

      </div>

     

      <div id="subMenu4" class="subItemNav">

        <a href="#">some link</a> | 

        <a href="#">some link</a> 

      </div>

      <div id="subMenu5" class="subItemNav">

        <a href="#">some link</a> | 

        <a href="#">some link</a> 

      </div>

      <div id="subMenu6" class="subItemNav">

        <a href="#">some link</a> | 

        <a href="#">some link</a> 

      </div>     

</div>

<br /><br /><br /><br />

<script type="text/javascript">

// =========================[01]=========================

// 初始化，

// 变量totalItems表示共有多少个主菜单项

var totalItems = 6;

function init(){ 

   for (var i=1; i<= totalItems; i++){

      // 获取所有子菜单项div元素，并设置其样式

      var oSubItem = document.getElementById("subMenu"+i);//注意括号中获取不同子菜单div的做法

      oSubItem.style.visibility = "hidden"					//默认开始时全部子菜单都是隐藏的

      // 获取所有主菜单项div元素，并设置其样式，主要就是初始化定位

      var oMainItem = document.getElementById("mainItem"+i);//注意括号中获取不同主菜单div的做法

      oMainItem.style.left = 74*i+"px";						//设置主菜单初始状态的样式,注意相间同样距离的不同项的设置74*i，其中i是项目顺序。

   }

}

init();

// =========================[02]=========================

// 鼠标指针移到主菜单项上方，触发该函数

// 该函数重新设置主菜单项和子菜单项

function displaySubItem(theobj){

   for (var i=1; i<= totalItems; i++){

	 //   var oSubItem = document.getElementById("subMenu"+i);//获取各个子菜单项		这个注释掉也行???????

    //  oSubItem.style.visibility = "hidden";				这个设置隐藏的样式我觉得没必要了，初始是隐藏的，新样式在后面几句设置??????????

      var oMainItem = document.getElementById("mainItem"+i);

      oMainItem.style.backgroundImage = "url(images/tab1.gif)";

   }

   var mainItemIndex =

                   theobj.getAttribute("id").toString().substring(8);//分别是获取属性函数，返回字符函数，提前字符函数（start,stop）

				   															////

  var oSubItem = document.getElementById("subMenu"+mainItemIndex);			////stop可省略。这两句话怎么解析呢？？？？什么意思呢？126中的有何不同呢？

   oSubItem.style.visibility="visible";					//显示子菜单行

  theobj.style.backgroundImage = "url(images/tab2.gif)";//改变主菜单项的背景

}				

// =========================[03]=========================

// 鼠标指针移动时，触发该函数

// 注意对象变量scopeY用于定义垂直方向上的范围，这里是从5-60

// 表示主菜单项和子菜单项的范围

// 该函数检查鼠标指针是否超出这个范围，从而重新设置子菜单项

function closeAllSubItem(event){

   var scopeY = {top:5,bot:60};

   window.status=event.clientY;

   if ((event.clientY<scopeY.top)||(event.clientY>scopeY.bot)){

       for (var i=1; i<= totalItems; i++){

         var oSubItem = document.getElementById("subMenu"+i);

         oSubItem.style.visibility = "hidden";

      }  

   }

}

</script>



</body>
...全文
124 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
大师兄在取经 2012-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 的回复:]

引用 3 楼 的回复:

var mainItemIndex = //设置mainItemIndex变量等于
theobj.getAttribute("id").toString().substring(8) //获取 theobj的id名称并转换成字符串，最后取字符串的第7位及以后的所有字符（因为是从0算起的，详情查百度）。
var oSubItem = document.getE……
[/Quote]
还有我发现去掉"toString()"这个函数也行的。
看来这些函数的运用真的多点写多点接触啊
大师兄在取经 2012-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]

var mainItemIndex = //设置mainItemIndex变量等于
theobj.getAttribute("id").toString().substring(8) //获取 theobj的id名称并转换成字符串，最后取字符串的第7位及以后的所有字符（因为是从0算起的，详情查百度）。
var oSubItem = document.getElementById("subM……
[/Quote]
嗯嗯，我也刚刚也一句一句交替代换去尝试也发现了，终于知道怎么回事了。
动态获取ID这回事...呵呵,谢谢你啊,感谢!!!!
scscms太阳光 2012-08-23
  • 打赏
  • 举报
 回复
var mainItemIndex = //设置mainItemIndex变量等于
theobj.getAttribute("id").toString().substring(8) //获取 theobj的id名称并转换成字符串，最后取字符串的第7位及以后的所有字符（因为是从0算起的，详情查百度）。
var oSubItem = document.getElementById("subMenu"+mainItemIndex);//其实就是获取ID，只不过动态获取。换句话就是mainItemIndex是会变化的。
大师兄在取经 2012-08-23
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

我刚刚写了一个jquery版本的下拉菜单，你可参考一下！http://www.scscms.com/article/2012-8/2312396073.html

建议你的结构要改一下，js写简单一点。
[/Quote]
刚开始学习...而且jquery还没接触。你给的网页打不开....
我代码中:
var mainItemIndex =theobj.getAttribute("id").toString().substring(8);//这里为什么是8做参数也不明白，这两句话的获取搞不明
var oSubItem = document.getElementById("subMenu"+mainItemIndex);
scscms太阳光 2012-08-23
  • 打赏
  • 举报
 回复
我刚刚写了一个jquery版本的下拉菜单，你可参考一下！http://www.scscms.com/article/2012-8/2312396073.html

建议你的结构要改一下，js写简单一点。
html单击出现下拉菜单,*OnClick实现点击主菜单时出现下拉菜单，已实现但是有问题，求助！*...
1.点击“按类别查看宝贝”时，下拉菜单出现了，怎样在点击空白处或者点击“按类别查看宝贝”时，让下拉菜单消失？2.怎么解决定位问题：如果把我这段代码放到总代码里面(全页面中)，点击“按类别查看宝贝”时，页面会发生移动(移动到顶端)，怎样让页面固定在点击“按类别查看宝贝”时的位置？希望尽量用简洁实用的js代码(如果用jquery的话，请用不需要引用外部文件的代码)实现！能给改下/加一下代码么？先上上个...
前端排坑记录：解决下拉菜单被图片或DIV遮挡问题
下拉菜单被下面的各种奇奇怪怪的元素遮挡，被图片遮挡、被P标签遮挡。。。一开始遇到这个问题的时候，我也想到了肯定是z-index的缘故，然后就去给下拉菜单了一个position:relative; z-index:999;本以为可以解决问题，结果一经测试，还是老样子，如图：然后就是各种尝试，给遮挡它的元素也设置z-index:9;给下拉菜单的子元素设置z-index:999。。。还是没一点反应求助度...
element-ui下拉选项加多选框（带全部）
问题求助
特殊样式的下拉列表 - 布局的一百种方法
这种布局 需要把中间的那条边线做空 我能想到的方法： 一个空的span标签挡一下；除了用浮动外，尽量用负边距布局，若北京变成了四个字，长度变了也不好控制那个空标签跟着变 让“北京”所在的标签高度高一点，层级也高过下拉菜单，遮挡住他所占区域的下边线；但是涉及到这个例子，下拉菜单我给的是浮动的，层级已经比不浮动的高了，没办法，谁让他是拉出来的，不能放在父元素的正常文档流中呢。思考：怎么让他即实...
js动态加载html之后点击没有下拉框,js无法捕捉dom中由ajax动态加载的html元素
使用了jquery库具体的html 这边就不展示了，大概做一个范例介绍html 文件内容：Delete$(function(){$('#tid a.del').click(function(){alert('fk');// 弹出提示信息$('#tid').html('New Delete');//这边就不用ajax了，直接动态修改 div#tid 下的htmlreturn false;});});...
JavaScript

87,923

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章