JQuery OnBlur меню скрыть работает в Firefox не в Chrome - PullRequest
Новая
       89

JQuery OnBlur меню скрыть работает в Firefox не в Chrome

1 голос
/ 01 августа 2011

Привет, у меня есть код, который отображает раскрывающееся меню при нажатии кнопки: 


<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

Ответы [ 2 ]

2 голосов
/ 01 августа 2011 
<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'), так как я вижу только эти эффекты в API JQuery: .fadeIn (), .fadeOut (), .fadeTo () и .fadeToggle (): Эффекты

Это мой первый пост, так что если я ошибаюсь, дайте мне знать.Это решение работает для меня в Chrome.

Любые вопросы, дайте мне знать.Спасибо,

0 голосов
/ 06 января 2012

@ анонимно, аноним. Я прошу прощения за то, что никогда не обращался к вам по этому вопросу, и уверен, что вы перешли к более крупным и лучшим вещам, но я хотел бы разместить этот ответ здесь для всех, кто может наткнуться на эту тему в будущем. * 

 <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 (#) позволяют создавать эффекты размытия различной скорости и т. Д.

Надеюсь, это поможет. Спасибо.

...