仿下拉列表

最新推荐文章于 2021-06-03 09:03:17 发布

Helen_fight

最新推荐文章于 2021-06-03 09:03:17 发布

阅读量368

点赞数

本文链接：https://blog.csdn.net/yemuxia_sinian/article/details/50735933

版权

首先是整个的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
           
*{ padding: 0; margin: 0;}
.dsj{ width:295px; height:306px; background:url(images/dsj_bg.jpg) no-repeat #ccc; padding-left:22px; padding-right:74px; float:left; }
.ljls{ width:100%; height:26px; line-height:26px; font-size:12px; color:#fff; margin-top:4px; margin-bottom:16px; }
.lsxm{ width:254px; height:38px; line-height:38px; padding-left:10px; border:none; font-size:13px; color:#cbcbcb; }
.scly{ width:224px; height:38px; line-height:38px; padding-left:10px; padding-right:30px; margin-top:18px; border:none; font-size:13px; color:#666; background:url(images/select_bg.jpg) 240px center no-repeat; background-color:#fff; position:relative; }
.lysc{ display:none; width:264px; background:#fff; position:absolute; left:0; top:38px; list-style: none; }
.lysc li{ width:254px; height:30px; line-height:30px; padding-left:10px; cursor:pointer; }
.ppsh{ width:264px; height:36px; line-height:36px; text-align:center; font-size:14px; color:#fff; background:#0272b6; border:none; margin-top:16px; cursor:pointer; }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
       
    </head>
    <body>
    <div class="dsj">
        <div class="xzzl">大数据找律师</div>
        <div class="ljls">大数据更了解律师；智能系统快速匹配</div>
        <input class="lsxm" type="text" placeholder="输入律师姓名" />
        <div class="scly" style="z-index:999;">
            <span>擅长领域</span>
            <ul class="lysc ul1">
                <li>擅长领域</li>
                <li>擅长领域2</li>
                <li>擅长领域3</li>
            </ul>
        </div>
        <div class="scly">
            <span>案情关键词</span>
            <ul class="lysc">
                <li>案情关键词</li>
                <li>案情关键词2</li>
                <li>案情关键词3</li>
            </ul>
        </div>
        <input class="ppsh" type="button" value="匹配适合我的律师" />
    </div>
    </body>
</html>

首先思路就是：我点击div（scly）时要显示下拉类表ul（lysc）；然后对ul li点击完后再把ul li隐藏掉。起初自己的jq代码如下：

$(".scly").click({
            
            $(this).find(".lysc").show();
            $(this).find(".lysc li").click({
                
                $(this).parents(".scly").find("span").text($(this).text());
                //alert($(this).parent().html())
                $(this).parent(".lysc").hide();
 				
            });
            
            /*$(this).hover(function(){},function(){
                
                $(this).find(".lysc").hide();
            })*/
           
            $("html").click(function() {
               // alert("111")
                $(".lysc").hide();
				
            });			
        });
				
    });

感觉思路是对的啊，可是却无法得到自己想要的效果，点击完ul li后就没什么变化了，好像ul li点击事件没执行一样，其实是有执行可以在

 $(this).find(".lysc").show(4000);

<pre name="code" class="html"> $(this).parent(".lysc").hide(3000);

这两边加上个执行时间就可以看得比较清楚了。原因其实就是：有父子关系的HTML中加入click事件后会产生冒泡；当子元素的click被触发后，父元素的click会再次被触发。所以我们应该在子元素click触发后执行一下stopPropagation()函数（该函数作用就是阻止事件传播）。所以具体修改后的jq代码如下：

		$(".scly").click(function(event){
            
            $(this).find(".lysc").show();
            $(this).find(".lysc li").click(function(event){
                
                $(this).parents(".scly").find("span").text($(this).text());
                //alert($(this).parent().html())
                //$(this).parent(".lysc").find("li").hide();
               event.stopPropagation();
                $(".lysc").hide();
 				
            });
            
            /*$(this).hover(function(){},function(){
                
                $(this).find(".lysc").hide();
            })*/
            event.stopPropagation();
            $("html").click(function() {
               // alert("111")
                $(".lysc").hide();
				
            });			
        });

这样就可以得到自己想要的效果了。