Jquery onblur菜单隐藏工作在firefox而不是chrome

嗨，我有一些代码，当按钮被点击时显示一个下拉菜单:


<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中工作。

<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>

这个代码为我在谷歌浏览器。我从研究中发现，你的。effect('fold')在JQuery中不存在。使用"fold"的方式是在。hide/文件中。像我编辑你的代码一样:

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

这个链接展示了这个功能:折叠

你可能还想重写你的。effect('fade')，因为我只在JQuery API上看到这些效果:。fadein()，。fadeout()，。fadeto()和。fadetoggle (): effects

这是我的第一个帖子，所以如果我错了，让我知道。这个解决方案适用于我的Chrome浏览器。

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

@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(#)方法允许创建不同速度的模糊效果，等等。

我希望这对你有帮助。谢谢。

相关内容

最新更新

热门标签：