jquery onblur菜单隐藏在firefox中工作而不是在chrome中答案

【问题标题】：jquery onblur menu hide works in firefox not in chromejquery onblur菜单隐藏在firefox中工作而不是在chrome中
【发布时间】：2011-08-01 17:09:38
【问题描述】：

您好，我有一些代码在单击按钮时会显示一个下拉菜单：


<button id="friend-requestButton" class="ui-button-icon-only ui-corner-all ui-state-default"></button>

<!--button end-->

<!--Menu markup below-->

<div class="friend-requestMenu dropdown_Menu" id="friend-requestMenu">
    <div class="menuTitle">
        Friend Requests <a href='javascript:void(0)' class="titleLink">See All</a>
    </div>
    <a href='javascript:void(0)' class="menu_item">Menu Item</a>
    <a href='javascript:void(0)'>
        <div class="seeAllBlock">
            See All Requests
        </div>
    </a>
</div>


$('#friend-requestButton').click(function () {
    if ($('#friend-requestMenu').css('display') == 'none') {
        $('#friend-requestMenu').css('display', 'block').show('slide', { direction: 'up' }, 200);
    }
    else {
        $('#friend-requestMenu').css('display', 'none').effect('fold');
    }
})
.blur(function () {
    $('#friend-requestMenu').css('display', 'none').effect('fade');
});

问题是下拉菜单在 Firefox 中完美消失，但在 Chrome 中却没有。我不确定它是否重要，但它基本上是一个工具栏，z-index 的值大约是100。这是实际页面，脚本包含 jQuery 和一些插件 src'ed 以及其余部分 -> 我编写的实际代码...（我知道它在 IE 中不起作用，但在 Chrome 中 onblur 用于搜索栏左侧的按钮不起作用，但在FF5中可以，所以它必须在较低的FF中也可以。

非常感谢您的帮助：D

【问题讨论】：

标签： jquery events firefox google-chrome onblur

【解决方案1】：

<html>
<head>
<title>the title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function(){
$('#friend-requestButton').click(function () {
    if ($('#friend-requestMenu').css('display') == 'none') {
        $('#friend-requestMenu').css('display', 'block').show('slide', { direction: 'up' }, 200);
    }
    else {
        $('#friend-requestMenu').css('display', 'none').hide("fold", {}, 1000);
    }
});
$(this).blur(function () {
    $('#friend-requestMenu').css('display', 'none').effect('fade');
});
});
</script>
</head>
<body>
<button id="friend-requestButton" class="ui-button-icon-only ui-corner-all ui-state-default"></button>

<!--button end-->

<!--Menu markup below-->

<div id="friend-requestMenu">
    <div class="menuTitle">
        Friend Requests <a href='javascript:void(0)' class="titleLink">See All</a>
    </div>
    <a href='javascript:void(0)' class="menu_item">Menu Item</a>
    <a href='javascript:void(0)'>
        <div class="seeAllBlock">
            See All Requests
        </div>
    </a>
</div>
</body>
</html>

此代码适用于我在 Google Chrome 中。我从研究中发现您的 .effect('fold') 在 JQuery 中不存在。您使用“折叠”的方式是在 .hide/.show 中，就像我在编辑您的代码时所做的那样：

$('#friend-requestMenu').css('display', 'none').hide("fold", {}, 1000);

这是显示此功能的链接：Fold

您可能还想重写您的 .effect('fade')，因为我只在 JQuery API 上看到这些效果：.fadeIn()、.fadeOut()、.fadeTo() 和 .fadeToggle()：@ 987654322@

这是我的第一篇文章，如果我错了，请告诉我。这个解决方案在 Chrome 中适用于我。

有任何问题，请告诉我。谢谢，

【讨论】：

嗨 sgtbigman，感谢您的帮助，但我尝试了代码，似乎不起作用。我也尝试删除所有效果，仍然完全不模糊....它在firefox上运行良好，我没有为ie设计这个，所以没有办法告诉（css全部打乱），我听说必须添加tabindex = 0属性它的工作不太确定......
@anonymouslyanonymous 如果你很好奇，我找到了解决这个问题的方法。对于我的回复迟到，我深表歉意。

【解决方案2】：

@anonymouslyanonymous 很抱歉，我再也没有就此事回复您，并且确信您已经转向更大更好的事情，但我想将这个答案放在这里，以供将来可能偶然发现此线程的任何人使用。

 <script type="text/javascript">
 $(function(){
      $('#friend-requestButton').click(function () {
           if ($('#friend-requestMenu').css('display') == 'none') {
                $('#friend-requestMenu').show(1000);
           }
           else {
                $('#friend-requestMenu').hide(1000);
           }
      });
 });
 </script>

这是我今天在 Chrome 中正常工作的编辑代码。 .show(#) 和 .hide(#) 方法允许创建不同速度的模糊效果等。

我希望这会有所帮助。谢谢。

【讨论】：