用JAVASCRIPT怎么实现纵向弹出鼠标停在子菜单上的问题能不能帮忙看看~ 谢谢
<script type="text/javascript">
window.onload = function() {
var ul = document.getElementById('menu');
//下面该怎么实现啊? };
</script>
<style type="text/css">
ul.menu {
width:90px;
height:25px;
}
ul.menu li {
position:relative;
}
ul.menu li ul{
display:none;
position:absolute;
top:0;
left:100px;
}
ul.menu li ul li a {
width:80px;
height:24px;
display:block;
}</style><ul id="menu">
<li>
<a href="###">菜单1</a>
<ul>
<li><a href="###">子菜单a</a></li>
<li><a href="###">子菜单b</a></li>
</ul></li>
<li>
<a href="###">菜单2</a>
<ul>
<li><a href="###">子菜单c</a></li>
<li><a href="###">子菜单d</a></li>
</ul>
</li>
<li><a href="###">菜单3</a></li>
</ul>
<script type="text/javascript">
window.onload = function() {
var ul = document.getElementById('menu');
//下面该怎么实现啊? };
</script>
<style type="text/css">
ul.menu {
width:90px;
height:25px;
}
ul.menu li {
position:relative;
}
ul.menu li ul{
display:none;
position:absolute;
top:0;
left:100px;
}
ul.menu li ul li a {
width:80px;
height:24px;
display:block;
}</style><ul id="menu">
<li>
<a href="###">菜单1</a>
<ul>
<li><a href="###">子菜单a</a></li>
<li><a href="###">子菜单b</a></li>
</ul></li>
<li>
<a href="###">菜单2</a>
<ul>
<li><a href="###">子菜单c</a></li>
<li><a href="###">子菜单d</a></li>
</ul>
</li>
<li><a href="###">菜单3</a></li>
</ul>
<script type="text/javascript">
window.onload = function() {
$("#menu li").mouseenter(
function ()
{
$(this).find('ul').show();
}
).mouseleave (
function ()
{
$(this).find('ul').hide();
}
);
};
</script>
<style type="text/css">
ul.menu {
width:90px;
height:25px;
}
ul.menu li {
position:relative;
}
ul.menu li ul{
display:none;
position:absolute;
top:0;
left:100px;
}
ul.menu li ul li a {
width:80px;
height:24px;
display:block;
}#menu ul {
display:none;
}</style><ul id="menu">
<li>
<a href="###">菜单1</a>
<ul>
<li><a href="###">子菜单a</a></li>
<li><a href="###">子菜单b</a></li>
</ul></li>
<li>
<a href="###">菜单2</a>
<ul>
<li><a href="###">子菜单c</a></li>
<li><a href="###">子菜单d</a></li>
</ul>
</li>
<li><a href="###">菜单3</a></li>
</ul>
用js要处理些冒泡问题
我现在遇到的主要问题是,鼠标不能停留在二级菜单上,用relatedTarget不支持IE,这个怎么解决啊.
帮忙看看,JS代码如下<ul class="menu">
<li class="write">
<a href="###">菜单A</a>
<ul>
<li><a href="###">A</a></li>
<li><a href="###">B</a></li>
<li><a href="###">C</a></li>
</ul>
</li>
<li class="write">
<a href="###">菜单B</a>
<ul>
<li><a href="###">D</a></li>
<li><a href="###">E</a></li>
<li><a href="###">F</a></li>
</ul>
</li>
</ul>
window.onload = function() {
var list,menus=[];
// lists = document.body.getElementsByClassName('menu');
list = getByClass('menu')[0];
var lis = list.childNodes;
var li,a,ul;
for (var i=0;i<lis.length;i++) {
if (lis[i].tagName == 'LI') {
a = firstChild(lis[i]);
ul = next(a);
bind(a,ul);
}
}
var timeoutId = null;
function bind(a,ul) {
a.onmouseover = function() {
ul.style.display='block';
};
ul.onmouseout = function () {
ul.style.display = 'none';
}
a.onmouseout = function () {
//就在这边出的问题,鼠标停留不了,用relatedTarget不支持IE
ul.style.display='none';
};
}
};
//返回指定节点的第一个子元素
function firstChild(node) {
if (node.firstChild) {
if (node.firstChild.nodeType == 1) return node.firstChild;
else {
var n = node.firstChild;
while (n = n.nextSibling) {
if (n.nodeType == 1) return n;
}
return null;
}
}
return null;
}
//返回node的下一个兄弟元素
function next(node) {
if (node.nextSibling) {
if (node.nextSibling.nodeType == 1) return node.nextSibling;
else {
var n = node.nextSibling;
while (n = n.nextSibling) {
if (n.nodeType == 1) return n;
}
return null;
}
}
return null;
}function getByClass(className,context) {
context = context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes = context.getElementsByTagName('*'),
ret = [];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className) {
var names = node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}
要不你放在你的电脑上运行一下,看看能不能帮忙实现,CSS如下ul.menu {
width:95px;
}
ul.menu li {
height: 24px;
line-height: 24px;
position:relative;
}
ul.menu li ul {
display:none;
width:90px;
position:absolute;
top:0;
left:100px;
}
ul.menu li ul li a {
width:80px;
height:24px;
display:block;
}
ul.menu li ul li a:hover {
background:#ddd;
text-decoration:none;
}
var G = function (id){ return document.getElementById(id); }
var C = function (tag){ return document.createElement(tag); }
window.onload = function() {
var menu = function ()
{
this.menu = G('menu');
this.menu.innerHTML = '';
this.add = function (t_arr, c_arr)
{
var li;
li = C('li');
li.a = C('a');
li.a.href = t_arr.url;
li.a.innerHTML = t_arr.text;
li.ul = C('ul');
li.onmouseover = function () { li.ul.style.display = 'block'; }
li.onmouseout = function () { li.ul.style.display = 'none'; }
for (key in c_arr)
{
var t = C('li');
t.a = C('a');
t.a.href = c_arr[key].url;
t.a.innerHTML = c_arr[key].text;
t.appendChild(t.a);
li.ul.appendChild(t);
}
li.appendChild(li.a);
li.appendChild(li.ul);
this.menu.appendChild(li);
}
}
var ogject = new menu();
ogject.add({'text':'菜单1','url':'#'},[{'text':'菜单A','url':'#'},{'text':'菜单B','url':'#'}]);
ogject.add({'text':'菜单2','url':'#'},[{'text':'菜单C','url':'#'},{'text':'菜单D','url':'#'}]); };
</script>
<style type="text/css">
ul.menu {
width:90px;
height:25px;
}
ul.menu li {
position:relative;
}
ul.menu li ul{
display:none;
position:absolute;
top:0;
left:100px;
}
ul.menu li ul li a {
width:80px;
height:24px;
display:block;
}
#menu ul {
display:none;
}
</style>
<ul id="menu"> </ul>
#要不你放在你的电脑上运行一下,看看能不能帮忙实现,CSS如下
#11楼
曾经用css写过。但现在不记得为什么不用css了。应该有些问题。
有段时间不写js了。有点生疏。
bind(lis[i],ul); ul.menu {
width:190px;
height:25px;
} 你这20分好艰难啊。
二级菜单LI中只能选择LI,就是A,D
<ul class="menu">
<li class="write">
<a href="###">菜单A</a>
<ul>
<li><a href="###">A</a></li>
<li><a href="###">B</a></li>
<li><a href="###">C</a></li>
</ul>
</li>
<li class="write">
<a href="###">菜单B</a>
<ul>
<li><a href="###">D</a></li>
<li><a href="###">E</a></li>
<li><a href="###">F</a></li>
</ul>
</li>
</ul>
bind函数改一下。 function bind(a,ul) {
a.onmouseover = function() {
ul.style.display='block';
a.style.zIndex = 10;
};
a.onmouseout = function () {
ul.style.display = 'none';
a.style.zIndex = 9; }
}回答问题也不只是为了分。
分又不能吃。o_o...
万分感谢~~