Question

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


<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和其余 - ＆gt;我写的实际代码...（我知道它在IE中不起作用，但在Chrome中，搜索栏左侧按钮的onblur不起作用，但它在FF5中有效，所以它也必须在较低的FF中工作。

非常感谢你的帮助：D

Answer 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中不存在。您使用'fold'的方式是在.hide / .show中，就像我编辑代码一样：

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

以下是显示此功能的链接：Fold

你可能还想重写你的.effect（'fade'）因为我只在JQuery API上看到这些效果：.fadeIn（）,. fadeOut（）,. fadeTo（）和.fadeToggle（）：{ {3}}

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

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

Answer 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（＃）方法允许创建不同速度的模糊效果等。

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

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

2 个答案: