jquery模拟下拉框动作

最新推荐文章于 2025-05-07 12:07:27 发布

wccmfc123

最新推荐文章于 2025-05-07 12:07:27 发布

阅读量800

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/wccmfc123/article/details/20448475

学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用jQuery实现一个简单的下拉菜单效果。当鼠标悬停在特定元素上时，显示下拉选项；当鼠标移出指定区域时，隐藏这些选项。通过此教程，读者可以了解基本的jQuery操作及事件绑定技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现下拉选择框的功能，如下代码，当鼠标移到 div[id='sortType']下的a标签时，显示div[id='sortTypeList'] 下的选择项，当鼠标在div[id='sortType']和div[id='sortTypeList']外围时隐藏div[id='sortTypeList']下的选择项。

test.html

<div class="bao">
<div class="select"  id="sortType">
<a href="javascript:void(0);">销量排序</a>
</div>
<div class="xl" id="sortTypeList">
<ul>
<li><a href="javascript:void(0);"  id="saleVolumeSort">销量排序</a></li>
<li><a href="javascript:void(0);"  id="brandSort">品牌排序</a></li>
</ul>
</div>
</div>

test.js.

$(document).bind('mouseover',function(e) {  
		 var clickme = $(e.target);  
		 if (!clickme.parents().hasClass("bao")){ 
			 $(".xl").slideUp();//所有符合的都会隐藏
		 }
		  
	 });

$("#sortType").mouseover(function(){
			 $("#sortTypeList").slideDown();
		});