jquery onblur 菜单隐藏在 Firefox 中工作，但在 Chrome 中不起作用

发布于 2024-11-27 20:41:14 字数 1408 浏览 4 评论 0原文

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


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

原文

Hi, I have some code which displays a drop-down menu when the button is clicked:


<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');
});

The problem is that the drop-down disappears perfectly in Firefox but not in Chrome. I'm not sure if it's important, but it's basically a toolbar and the z-index value is at about 100. Here is the actual page, the script contains jQuery and some plugins src'ed and the rest -> The actual code I wrote...(I'm aware it doesn't work in IE, but in Chrome the onblur for the buttons on the left of the search bar does not work, but it works in FF5, so it must work in lower FF's too.

Thanks a lot for the help :D

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

戈亓 2024-12-04 20:41:14

<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 （“折叠”，{}，1000）；

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

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

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

如有任何疑问，请告诉我。
谢谢，

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

This code works for me in Google Chrome.
What I found from researching is that your .effect('fold') does not exist in JQuery. The way you use 'fold' is within a .hide/.show like I have in my edit of your code:

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

Here's a link that show's this functionality: Fold

You may also want to rewrite your .effect('fade') since I only see these effects on the JQuery API: .fadeIn(), .fadeOut(), .fadeTo(), and .fadeToggle(): Effects

This is my first post so if I am wrong, let me know. This solution works for me in Chrome.

Any questions, let me know.
Thanks,

回复收藏 0 原文

梦开始←不甜 2024-12-04 20:41:14

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

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

@anonymouslyanonymous I apologize for never getting back to you on this and am sure you have moved on to bigger and better things, but I wanted to put this answer here for anyone that may stumble upon this thread in the future.

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

That is the edited code that I got to work correctly in Chrome as of today. The .show(#) and .hide(#) methods allow for one to create blur effects of varying speed, etc.

I hope this helps.
Thanks.

回复收藏 0 原文

~没有更多了~