我是jQuery的新手,还在学习如何编写脚本.我最近尝试使用下拉菜单,但我觉得我在代码中遇到了错误,或者更重要的是,我觉得这种语言专家可以编写的代码行数少于我拥有的代码行.你能帮帮我吗?我的代码看起来像这样:
<ul id="menu">
<li><a href="">HOME</a></li>
<li id="li_1"><a href="">PRODUCTS</a>
<ul id="dropdown_1">
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li>
<li><a href="">Product 4</a></li>
<li><a href="">Product 5</a></li>
</ul>
</li>
<li id="li_2"><a href="">SERVICES</a>
<ul id="dropdown_2">
<li><a href="">Service 1</a></li>
<li><a href="">Service 2</a></li>
<li><a href="">Service 3</a></li>
<li><a href="">Service 4</a></li>
<li><a href="">Service 5</a></li>
</ul>
</li>
</ul>
jQuery的
<script type="text/javascript">
var slide_down_1 = function() {
$('#dropdown_1').slideDown(300);
}
var slide_up_1 = function() {
$('#dropdown_1').stop(true, true).slideUp(300);
}
$('#li_1').mouseenter(slide_down_1);
$('#li_1').mouseleave(slide_up_1);
var slide_down_2 = function() {
$('#dropdown_2').slideDown(300);
}
var slide_up_2 = function() {
$('#dropdown_2').stop(true, true).slideUp(300);
}
$('#li_2').mouseenter(slide_down_2);
$('#li_2').mouseleave(slide_up_2);
</script>
最佳答案 使用^的属性选择器获取所有以给定字符串开头的元素..用于mouseenter()和mouseleave()的hover()简写,第一个参数是mouseenter函数,第二个参数是mouseleave函数.
试试这个
$('li[id^="li"]').hover(function(){
$(this).find('ul').slideDown();
},function(){
$(this).find('ul').stop(true, true).slideUp();
});
这将适用于所有< li> tag ….而不是为每个li …创建单独的函数.为所有< li>调用hover函数并使用$(this)引用..