冲突的javascript隐藏下拉列表元素
一个页面上有两个脚本。其中一个启用水平导航栏中的下拉列表。另一个允许在导航栏下方的2个级别中展开列表。在此页面上，导航栏中包含下拉列表的列表项丢失，仅显示没有下拉列表的菜单项冲突的javascript隐藏下拉列表元素,javascript,html,Javascript,Html,一个页面上有两个脚本。其中一个启用水平导航栏中的下拉列表。另一个允许在导航栏下方的2个级别中展开列表。在此页面上，导航栏中包含下拉列表的列表项丢失，仅显示没有下拉列表的菜单项 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
<script type="text/javascript">
$(function(){
$('li').not(".drop_down" )
.css('pointer','default')
.css('list-style-image','none');
$('li:has(ul)').not( ".drop_down" )
.click(function(event){
if (this == event.target) {
$(this).css('list-style-image',
(!$(this).children().is(':hidden')) ? 'url(images/plusbox.gif)' : 'url(images/minusbox.gif)');
$(this).children().toggle('100');
}
//return false;
})
.css({cursor:'pointer', 'list-style-image':'url(images/plusbox.gif)'})
.children().hide();
$('li:not(:has(ul))').not( ".drop_down" ).css({cursor:'default', 'list-style-image':'none'});
});
</script>
</head>
<body>
<div id="topnav">
<p>Horizontal navigation bar</p>
<p>The styled page does not show the + symbols in the navbar. Menu items with no dropdowns move left to occupy the space that should be occupied by elements with dropdown lists.</p>
<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Item 1</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Item 2</span></a></li>
<li class="top"><a href="#" class="top_link"><span class="down">Item 3</span></a>
<ul class="sub">
<li style="margin:10px 0; font-size:1rem; font-style:italic; ">Bicycle</li>
<li><a href="#">3-1</a></li>
<li><a href="#">3-2</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span class="down">Item 4</span></a>
<ul class="sub">
<li><a href="#">4-1</a></li>
<li><a href="#">4-2</a></li>
<li><a href="#" target="_blank">4-3</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span class="down">Item 5</span></a>
<ul class="sub">
<li><a href="#">5-1</a></li>
<li><a href="#">5-2</a></li>
<li><a href="#">5-3</a></li>
</ul>
</li>
<li class="top"><a href="#"class="top_link"><span>Contact</span></a>
</li>
</ul>
</div>
<div style="margin-top:24px">
<p>Expandable lists</p>
<ul>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
帮助？页面上的第二个javascript，jQuery，隐藏列表项li的子项，特别是具有ul的li。您需要更改jQuery代码中的not选择器以忽略第一个ul 而不是。不是。放下 使用.not.top
既然已经包含了jQuery，为什么不使用jQuery？我不知道javascript或jQuery，所以我在线搜索脚本并将它们粘贴到页面中。我知道这很蹩脚，但我不想花无穷无尽的时间去学习我一无所知的东西。