资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jQuery中怎么实现点击页面其他部分隐藏下拉菜单功能

这篇文章主要为大家展示了“jQuery中怎么实现点击页面其他部分隐藏下拉菜单功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery中怎么实现点击页面其他部分隐藏下拉菜单功能”这篇文章吧。

十载的泸县网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同,自动调整泸县建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“泸县网站设计”,“泸县网站推广”以来,每个客户项目都认真落实执行。

一、开发小要点

    web页面中,我们一般不用select、option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,该怎么办呢?只能用js这老大哥来控制了。

二、代码

    HTML:


  
    请选择
  
       
  • 01
  •     
  • 02
  •     
  • 03
  •     
  • 04
  •      

        CSS:

    
       *{margin:0;padding:0}
       ul,ol{list-style: none}
       .select_box{
         position:relative;
         margin:100px auto;
         width:300px;
       }
       .select{
         padding:5px 10px;
         border:1px solid #dedede;
       }
       .select:hover{
         cursor:pointer;
       }
       .select span{
         display: block;
         background:url("../../img/downicon.png") no-repeat right;
       }
       .list{
         display: none;
         position:absolute;
         top:30px;
         width:298px;
         border:1px solid #dedede;
         border-top:none;
       }
       .list li{
         padding:5px 10px;
       }
       .list li:hover{
         background:#ddd;
       }
     

        JS:

     $(function(){
       $(".select").click(function(){
        $(".list").toggle();
       })
       $(".list li").click(function(){
        $(".select span").html($(this).html());
        $(".list").hide();
       })
       $(document).bind("click",function(e){
        var e = e || window.event;  //事件对象,兼容IE
        var target = e.target || e.srcElement; //源对象,兼容火狐和IE
        while(target){
          if (target.id && target.id == "selected"){  //循环判断至根节点,防止点击的是#selected和它的子元素
           return;
        }
          target = target.parentNode;
        }
          $(".list").hide();  //点击的不是#selected和它的子元素,隐藏下拉菜单
        })
      })

        效果:

    jQuery中怎么实现点击页面其他部分隐藏下拉菜单功能

    以上是“jQuery中怎么实现点击页面其他部分隐藏下拉菜单功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    网站标题:jQuery中怎么实现点击页面其他部分隐藏下拉菜单功能
    地址分享:http://www.cdkjz.cn/article/jdgesd.html
    返回首页 了解更多建站资讯
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220