jquery развернуть <li>вправо и свернуть влево - PullRequest
Новая
       21

jquery развернуть <li>вправо и свернуть влево

0 голосов
/ 13 декабря 2011

Попытка получить элемент меню li, чтобы развернуть его вправо, показывая форму поиска по событию click, а затем снова закрывать при нажатии на что-либо за пределами самой формы поиска. Мне удалось заставить расширение работать, но я не могу понять крах. Я знаю, что уже довольно много вопросов по этому поводу, но я думаю, что я слишком устал, чтобы понять это ... любая помощь приветствуется.

UDPATE:

Удалось получить эффект с событием mouseleave(): http://jsfiddle.net/C3YCP/31/

Но все же из любопытства я не могу заставить его рухнуть с каким-нибудь событием щелчка?

HTML: 

<li id="search">
    <a href="#" title="Search" id="searchA">Search</a>
    <div id="searchWrap">
        <form> 
            <fieldset> 
                <input type="text">  
            </fieldset>
        </form>
    </div>
</li>

JS: 

$("#search").click (function() {
    $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");
    $("#searchA").animate({width:'180px'},200)','color':'#4d4d4d'});
    $('#searchWrap').show("slide", 200);
    $("#search input").css({'background-color':'#fff'});
    });
$("#searchWrap").click(function() { 
return false;
});

CSS: 

#search { width: 112px; }
#searchA { color: #fff; padding: 18px 35px 53px 9px; } 
#searchWrap { position: absolute; top: 53px; left: 10px; display: none; }
#search form { padding: 0 10px 0 0; }
#search fieldset { border: none; }
#search input { width: 200px; height: 20px; border: 1px solid #fff; background-color:#4D4D4D; outline: none; color: #4D4D4D; padding: 0 0 0 3px;}

Ответы [ 3 ]

1 голос
/ 13 декабря 2011

Попробуйте это: 

$("#search").click(function() {
    $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");
    $("#searchA").animate({width:'180px'},200).css({'background-image':'url(images/nav-searchgrey.png)','color':'#4d4d4d'});
    $('#searchWrap').show("slide", 200);
    $("#search input").css({'background-color':'#fff','border-color':'#BBBDBF'});

    $('body :not(#searchWrap)').one(function() {
      // Hide search.
    });
});
0 голосов
/ 13 декабря 2011

Использование HTML-клика для определения клика за пределами поиска 

$('html').click(function() {
   //Change the CSS here to hide
});

И не забудьте включить event.stopPropagation ();

В вашем случае 

$("#search").mouseup(function(event) {
    $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");
    $("#searchA").animate({width:'180px'},200).css({'background-image':'url(images/nav-searchgrey.png)','color':'#4d4d4d'});
    $('#searchWrap').show("slide", 200);
    $("#search input").css({'background-color':'#fff','border-color':'#BBBDBF'});
    event.stopPropagation();
 });
0 голосов
/ 13 декабря 2011

'blur' - это событие, которое отправляется, когда пользователь «расфокусирует» поле, которое в данный момент сфокусировано.Вы можете напрямую прослушивать это событие, используя метод размытия в jQuery следующим образом: 

$('#searchWarp input:first').blur(function(event) {
    // reverse the actions that you made on the 'mouseup' event handler
}

Удачи!

...