页面鼠标移入移出、点击显示隐藏的处理

àì夳堔傛蜴生んèń 2022-11-05 10:57 327阅读 0赞

我们在页面开发中比较常见的功能是鼠标移入移出，或点击时，需要特定元素显示或隐藏的操作，实现方法很多，下面给出比较通用的方法

注：需要页面引入jquery，这个不用多说。

页面元素代码部分

  1. <div class="freepub_box" id="d_freepub_box" style="display:none;">
  3.    <div class="freepub_box_sub">
  4.              <div class="freepub_title">我是内部元素标题</div>
  5.              <div class="freepub_body">
  7.  我是内容
  9.              </div>
  11.  </div>
  13. </div>

js脚本部分

  1. $(".freepub").mouseover(function (){  
  2.        $("#d_freepub_box").show();
  3.    });
  4.     //点击空白区域隐藏元素
  5.     $(document).click(function(e){
  6.       e = window.event || e;
  7.       var obj = e.srcElement || e.target;
  8.       var v_class=$(obj).attr("class");
  9.       //console.log('obj_class=',v_class); 
  10.       if( isEmpty(v_class) ||v_class.indexOf("freepub_") < 0 ) {
  11.         $("#d_freepub_box").slideUp('slow');
  12.       }
  14.     });
  15.    });

发表评论

表情：
评论列表 （有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读