下拉框的定位

最新推荐文章于 2023-07-05 15:19:47 发布

fangqun663775

最新推荐文章于 2023-07-05 15:19:47 发布

阅读量3k

点赞数

分类专栏： js/jquery 文章标签：下拉框定位

本文链接：https://blog.csdn.net/fangqun663775/article/details/50749643

版权

js/jquery 专栏收录该内容

45 篇文章

订阅专栏

本文探讨了下拉框定位的问题，包括在普通页面和弹出窗口中如何实现准确的下拉框定位。特别指出jQuery无法获取隐藏元素的偏移坐标这一关键点。

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

absolute :　将对象从文档流中拖出，使用 left， right， top， bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body对象。而其层叠通过 z-index属性定义

.offset()返回： Object
为匹配的元素集合中获取第一个元素的当前坐标，相对于文档（document）。

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和.position()的差别在于：.position()是相对于相对于父级元素的位移。当定位在全局环境中（比如拖放的实现）最高的一个新元素时.offset()是非常有用的。

.offset()返回一个包含top 和 left属性的对象。

注意：jQuery不支持获取隐藏元素的偏移坐标。

情况一：普通页面里查询头弹出下拉框定位

<input type="text"  size="33px" name="joinInput.indicatorName"  value="${joinInput.indicatorName}"  readonly="readonly" οnclick="showMenu(this,'CC');"  />




<div id="menuContentIFactor" class="menuContent" style="border:1px solid #CCCCCC; width:214px; display:none; position: absolute;z-index: 99; background-color: #FFFFFF; height: 280px;"> 
	  <ul id="treeDemoIFactor" class="ztree" style="height: 270px;overflow: auto;width:204px;" ></ul>
          <input  id="assetPropertyId" type="hidden"   value="${itemFactorMap2.assetPropertyId}"   />         
</div>






function showMenu(e,name) { 
 			var checkId=$("#checkConCheckId").find("option:selected").val();
 			if(checkId!=-1){
 			var url = "listCheckType.do?unionCheckInput.checkId="+checkId;
			$.ajax({
				type:'post',
				url:url,
				success:function(data){
				var selectedIndicatorNo=$("#indicatorNoCC").val();
						if(data!=''){
				   			var zNodes = eval(data);
				  		 $.fn.zTree.init($("#treeDemo"+name), settingCC, zNodes);
				  		 var treeObj= $.fn.zTree.getZTreeObj("treeDemo"+name);
				  		 //var nn=treeObj.getNodeByParam("id",selectedIndicatorNo,null);
				  		  treeObj.expandAll(true);
				  		 //treeObj.selectNode(nn);
				  		
						}else{
							document.getElementById("menuContent"+name).innerHTML="<br><br><center><font color='red'>暂无数据</font></center>";
							 
						}
				}
			});
 			
 			$("#menuContent"+name).show();
  			ele=e;
            var cityObj = $(e);  
            var cityOffset = $(e).offset();  
            $("#menuContent"+name).css({left:cityOffset.left-210 + "px", top:cityOffset.top-152 + cityObj.outerHeight() + "px"}).slideDown("fast");  
 				//隐藏下拉框
		   function hideMenu(event){
		      	if (!(event.target.id == "menuContent"+name  || $(event.target).parents("#menuContent"+name).length>0)) {
						$("#menuContent"+name).hide();
					}
		   }
		   
		   $("body").bind("mousedown", hideMenu);//目标按下的时候调用
		   }else{
		   alertMsg.info("请先选择XX");
		      return;
		   }
        }

情况二：弹出窗口中下拉框的定位

   //点击弹出资产类别下拉框定位
		function showCateMenu(e,name) { 
 			var assetCategoryIDIFactor=$("#assetCategoryIDIFactor").val();
 			var url = "listCategory.do";
			$.ajax({
				type:'post',
				url:url,
				success:function(data){
						if(data!=''){
				   		var zNodes = eval(data);
				  		 $.fn.zTree.init($("#treeDemo"+name), settingIFactor, zNodes);
				  		 var treeObj= $.fn.zTree.getZTreeObj("treeDemo"+name);
				  		 treeObj.expandAll(true);
				  		 //反显已勾选的
				  		if(assetCategoryIDIFactor!=""){
					              var node=treeObj.getNodeByParam("categoryId",assetCategoryIDIFactor);
					              treeObj.checkNode(node,true,false);
				          } 
						}else{
							document.getElementById("menuContent"+name).innerHTML="<br><br><center><font color='red'>暂无数据</font></center>";
							 
						}
				}
			});
 			$("#menuContent"+name).show();
            var positonOffset=$(e).position();//鼠标点击的位置相对于弹出框（父级元素的位置）
            $("#menuContent"+name).css({left:positonOffset.left +4+ "px", top:positonOffset.top +132+ "px"}).slideDown("fast");  
 				//隐藏下拉框
		   function hideMenu(event){
		      	if (!(event.target.id == "menuContent"+name  || $(event.target).parents("#menuContent"+name).length>0)) {
						$("#menuContent"+name).hide();
					}
		   }
		   
		   $("body").bind("mousedown", hideMenu);//目标按下的时候调用
        } 





<div id="menuContentIFactor" class="menuContent" style="border:1px solid #CCCCCC; width:214px; display:none; position: absolute;z-index: 99; background-color: #FFFFFF; height: 280px;"> 
	  <ul id="treeDemoIFactor" class="ztree" style="height: 270px;overflow: auto;width:204px;" ></ul>
            <input  id="assetPropertyId" type="hidden"   value="${itemFactorMap2.assetPropertyId}"   />         
</div>

<input type="text"  size="36"  style="width:210px;"   readonly="readonly" οnclick="showCateMenu(this,'IFactor');" value="${itemFactorMap2.AssetCategoryName}" />