鼠标移开，下拉自动消失

a511721932 2012-08-18 07:14:04
有个菜单栏，当鼠标移上去时会出现下拉，但鼠标移开后，下拉还是存在，除非点了左键，下拉才会自动隐藏，现在想改成不点左键，直接移开自动就会隐藏，该怎么实现
html代码
<!-start->

<link href="images/dropdownmenu/{#tempcolor#}.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="{#CP#}js/dropdownmenu.js"></script>

<div class="dropdownmenu">

<!-start-> 



<!-menu->

<div id="dorpmenu_{#n#}" class="dorpmenu">

	<a href="{#menuurl#}" class="dorpmenu">{#menu#}</a>

</div>

<div id="subdorpmenu_{#n#}" class="subdorpmenu">

{#smenustr#}

</div>

<!-menu->

<!-list->

<li id="dropmenuli_{#id#}" ><a href="{#menuurl#}" class="subdropmenu">{#menu#}</a></li>

<!-list->

<!-end-> 

</div>

<!-end->

CSS
.dropdownmenu{

   clear:both;

   margin:0;

   white-space:nowrap;

   overflow:hidden;

   width:100%;

   height:28px;

   color:#fff;

   background-color:#2266aa;

}



.dorpmenu{

   float:left;

   width:100px;

   color:#fff;

   border-left:1px solid #6796c4;

   line-height:28px;

   text-align:center;

   margin-left:-1px;

   

}





a.dorpmenu:link,a.dorpmenu:visited,a.dorpmenu:active {

   color: #fff; 

   display:block;

   text-decoration: none;

   line-height:28px;

}





a.dorpmenu:hover {

   color: #fff; 

   text-decoration: none;

   background-color:#477fb9;

   line-height:28px;

} 



div.subdorpmenu{

   display:none;

   position:absolute;

}



div.subdorpmenu ul{

   background-color:#2266aa;

   border:1px #6796c4 solid;

   border-top:0px;

   width:99px;

}



div.subdorpmenu ul.firstdrop{

   width:98px;

}



div.subdorpmenu li{

   padding:0px;

   list-style-type:none;

   text-align:center;

   line-height:28px; 

   height:28px;



   border-top:1px #6796c4 solid;

}



div.subdorpmenu li.current{

   height:28px; 

   background-color:#477fb9;

}





div.subdorpmenu a,a.subdorpmenu:link,a.subdropmenu:visited,a.subdorpmenu:active{

   display:block;

   color: #fff; 

   text-decoration: none;

   font:12px/28px Arial;

}



a.subdorpmenu:hover {

   display:block;

   color: #fff; 

   text-decoration: none;

   font:12px/28px Arial;

}

JS
<!--





//下拉菜单

$(document).ready(function() {

	

	var getObj = $('div.dorpmenu');

	getObj.each(function(id) {

		var obj = this.id;

		var n=parseInt(obj.substr(9));



		$("#"+obj).mouseover(function () {

			if($("div#subdorpmenu_"+n)[0].style.display!="block"){

				$("div.subdorpmenu").hide();

			}

			$("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";

			$("div#subdorpmenu_"+n).show();





			if(id==0){

				$("div#subdorpmenu_"+n).find("ul")[0].className="firstdrop";

				$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft+1 + "px";

			}else{

				$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft + "px";

			}

			



			$("div#subdorpmenu_"+n).find("li").mouseout(function () {

				this.className="";

			});

			

			$("div#subdorpmenu_"+n).find("li").mouseover(function () {

				this.className="current";

				$("div.subdorpmenu").hide();

				$("div#subdorpmenu_"+n).show();

			});

			

			

		});



		$("#"+obj).mouseout(function () {

			//$("div.subdorpmenu").hide();  //ie6不兼容

		});



		



	});



	$("body").click(function () {

		$("div.subdorpmenu").hide();

	});





});



-->




修改哪处能实现啊，就在这基础上改
...全文
459 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
泡泡鱼_ 2012-08-20
  • 打赏
  • 举报
 回复
前面两位的应该都可以达到效果，你自己后面的
$("body").click(function () {
$("div.subdorpmenu").hide();
});

其实本质不就是一个mouseout事件发生了么，或者说blur。反正你要操作的对象失去焦点了
泡泡鱼_ 2012-08-20
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]
你代码里面本来不就是有这个功能，被注释掉了


JScript code

//下拉菜单
$(document).ready(function() {

var getObj = $('div.dorpmenu');
getObj.each(function(id) {
var obj = this.id;
var n=……
[/Quote]
同上
a511721932 2012-08-20
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]

你代码里面本来不就是有这个功能，被注释掉了

JScript code

//下拉菜单
$(document).ready(function() {

var getObj = $('div.dorpmenu');
getObj.each(function(id) {
var obj = this.id;
var n=parseInt……
[/Quote]
还是不行啊
AMinfo 2012-08-19
  • 打赏
  • 举报
 回复
你代码里面本来不就是有这个功能，被注释掉了



//下拉菜单

$(document).ready(function() {

    

    var getObj = $('div.dorpmenu');

    getObj.each(function(id) {

        var obj = this.id;

        var n=parseInt(obj.substr(9));



        $("#"+obj).mouseover(function () {

            if($("div#subdorpmenu_"+n)[0].style.display!="block"){

                $("div.subdorpmenu").hide();

            }

            $("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";

            $("div#subdorpmenu_"+n).show();





            if(id==0){

                $("div#subdorpmenu_"+n).find("ul")[0].className="firstdrop";

                $("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft+1 + "px";

            }else{

                $("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft + "px";

            }

            



            $("div#subdorpmenu_"+n).find("li").mouseout(function () {

                this.className="";

            });

            

            $("div#subdorpmenu_"+n).find("li").mouseover(function () {

                this.className="current";

                $("div.subdorpmenu").hide();

                $("div#subdorpmenu_"+n).show();

            });

            

            

        });



        $("#"+obj).mouseout(function () {

            $("div.subdorpmenu").hide();  //ie6不兼容

        });



        



    });



    $("body").click(function () {

        $("div.subdorpmenu").hide();

    });





});
a511721932 2012-08-19
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

试试这样，并把mouseout改成mouseleave

$("#"+obj).mouseover(function () {
if($("div#subdorpmenu_"+n)[0].style.display!="block"){
$("div.subdorpmenu").hide();
}
……
[/Quote]
能详细点吗？就在我那改啊
去圣西罗-为尤文喝彩 2012-08-18
  • 打赏
  • 举报
 回复
试试这样，并把mouseout改成mouseleave

$("#"+obj).mouseover(function () {
if($("div#subdorpmenu_"+n)[0].style.display!="block"){
$("div.subdorpmenu").hide();
}
$("div#subdorpmenu_"+n)[0].style.top=$("#"+obj)[0].offsetTop+$("#"+obj)[0].offsetHeight+"px";
$("div#subdorpmenu_"+n).show();


if(id==0){
$("div#subdorpmenu_"+n).find("ul")[0].className="firstdrop";
$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft+1 + "px";
}else{
$("div#subdorpmenu_"+n)[0].style.left=$("#"+obj)[0].offsetLeft + "px";
}


$("div#subdorpmenu_"+n).find("li").mouseout(function () {
this.className="";
});

$("div#subdorpmenu_"+n).find("li").mouseover(function () {
this.className="current";
$("div.subdorpmenu").hide();
$("div#subdorpmenu_"+n).show();
});


}).mouseleave(function () {
$("div.subdorpmenu").hide();
});
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
本文为大家详细介绍下使用javascript实现当鼠标移开时已弹出子菜单自动消失，具体如下，感兴趣的朋友不要错过
《程序天下：JavaScript实例自学手册》光盘源码
4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 ...
Python自动化测试之Selenium
本课程详细介绍了Selenium Python版本的自动化测试方法和实践，通过本课程的学习你将掌握如下内容：Selenium 测试环境搭建单元测试、生成测试报告、定位元素、WebDriver属性和方法、WebElement属性和方法、操作form...
程序天下:JavaScript实例自学手册
4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 ...
AutoPlay_Menu_Builder6.0.1328注册版
　延迟指定工具提示的延迟时间，包括从鼠标移入控件到显示工具提示的延迟时间，以及在鼠标不移出控件的情况下，从显示工具提示到工具提示消失的延迟时间。 　启动窗口和结束窗口启动窗口是启动自动运行菜单时显示的...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章