JQuery】jQuery 怎么实现点击页面其他地方隐藏菜单?

2021-12-23 14:01发布

4条回答

*{undefined


margin:0px;


padding:0px;


}


.main{undefined


cursor:pointer;


}


.list{undefined


border:1px solid black;


display:none;


}


.list li{undefined


cursor:pointer;


border:1px solid red;


list-style:none;


}


#noPopEvent{undefined


width:100px;


height:100px;


background-color:blue;


font-size:12px;


margin:200px;


text-align:center;


line-height:100px;


}


$(document).ready(function(){undefined


$(".main").click(function(e){undefined


$(".list").toggle();


e.stopPropagation();


})


$(document).click(function(){undefined


$(".list").hide();


})


$(".list li").click(function(){undefined


$(".main").text($(this).text());


$(".list").hide();


})


$("#noPopEvent").click(function(e){undefined


e.stopPropagation();


})


});


zgtl_20
3楼 · 2021-12-29 16:02
visible_block = false;$(document).ready(function(){
  $("body").click(function(){  /* 函数1 */
     if(visible_block == false){
      $(".menu").hide();
     }
     visible_block = false;
  });

  $(".menu").click(function(){  /* 函数2 */
    visible_block = true;
  });

  $("button").click(function(){  /* 函数3 */
    $(".menu").toggle();
    visible_block = true;
  });});

注:点击body除button和menu的任意一区域,只执行函数1。

点击button,先执行函数3,再执行函数1。

点击menu内的任意内容,先执行函数2,再执行函数1。



标指向或者点击按钮出现菜单后,如果要单击页面任意位置让菜单隐藏。很简答可以直接用Jquery,给document对象加一个单击事件后,用jquery选择器定位到要隐藏

Danke - 四有青年
5楼 · 2022-01-06 14:30

点击页面其它地方隐藏id为messageList的div

相关问题推荐

  • 回答 9

    jQuery是库,不是框架。库只管引进来使用,除了库接口,没有其他约束,随便怎么用,free style。而框架则有着各种各样的严格约束。

  • 回答 6

    id、name、class这三种会了就行了,后面在实践中慢慢学习吧。。不过现在纯前端好像都不咋用jquery了

  • 回答 5

    文档过一遍,感觉理解了写一个todolist,然后把react-router文档过一遍,写一个todolist,最后把redux文档看一遍,写一个todolist。这样下来,react全家桶基本理解了

  • 回答 6

    前端技术每年都会不断更新,一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,前端技术工程师缺口非常大。技术的发展规律其实,技术的发展趋势就是追求更高的复用性,更简便的业务代码写法,所以最终都会要求跨平台、都会彻底分离非业务逻辑。j...

  • 回答 3

    有一定影响,而且不仅对蜘蛛,如果用户浏览器把js禁用的话也显示不了

  • 回答 5

    国外还有 Amazon, 全球最大的电子商务网站。还有微软,很多很多。

  • 回答 4

    前端框架的vue.js,angular.js,可视化工具d3.js,移动端:zepto等

  • 回答 6

    最接近替代品的当然是Zepto。不过如果你没有legacy的代码要维护,又只需要支持green browsers,可以考虑完全用标准api。

  • 回答 1

    1

  • 回答 5

    两个都不学写网站一点问题都没有。工具而已,写代码的时候突然需要了现学现用都行。jquery 是方便你不使用原生js的情况下直接调用一些控制element动态响应的抽象方法 的函数库而boostrap是一个前端框架,主要作用是内置了很多全局css样式,写前端的时候随便用...

  • 回答 2

    1. jQuery 里面有很多东西是出于兼容性,历史遗留。比如 .ready() 之类的函数,为什么会很scroll 有关,那是为了兼容某些ie。这种代码对于编程思想来说不仅没用,而且是杂音,你要筛选出来就得了解这段代码的变动,费心费力得不偿失。2. jQuery 里面的代码不...

  • 回答 6

    一个很明显的缺点就是,太大。对于一些比较小的项目确实可以做到快速开发,但是现在的jQuery太臃肿了,有很多用不到的功能。所以现在有了很多精简jQuery的项目。另外就是全DOM操作,钩子往往会依赖标签,如果依赖jQuery来搭建页面的话(比如后台输出json,然...

  • 回答 2

    angularjs这个类库本身就借助了jquery的一个弱化版本jqLite来操作html中的dom树,所以angularjs中使用jquery是完全没有问题的,相反的如果你使用angularjs做项目时间越长你会发现angularjs只有配合jquery才能更好的进行开发。尤其在directive中操作dom元素,...

  • 回答 3

    jquery有关于淡入淡出效果的方法,一共四个,分别是:fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() 用于淡入已隐藏的元素$(button).click(function(){   $(#div1).fadeIn();   $(#div2).fadeIn(slow);   $(#div3).fadeIn(3000); });jQuery .....

  • 回答 4

    下面我们要在这个对象上挂载一个extend方法,用于让开发者为我这个对象添加功能和方法。12345var $ = {   extend:function(ob){      /**暂时不管里面写什么**/   }  }现在,我们就在$这个对象上添加了一个extend方法,外部可以通过$.extend(obj...

没有解决我的问题,去提问