css jquery向右展开< li>并向左折叠

e0uiprwp 于 2022-11-27 发布在 jQuery

关注(0)|答案(3)|浏览(209)

试图让菜单li项向右展开，在click事件上显示搜索表单，然后在单击搜索表单之外的任何内容时再次关闭。我设法让展开工作，但无法弄清楚折叠。我知道已经有很多关于这方面的问题，但我想我只是太累了，搞不懂它...任何帮助感激不尽。

更新日期：

设法通过mouseleave()事件获得效果：http://jsfiddle.net/C3YCP/31/
但出于好奇，我不能让它崩溃与某种点击事件？
于飞：

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

css

来源：https://stackoverflow.com/questions/8484195/jquery-expand-li-right-and-collapse-left

3条答案

按热度按时间

ie3xauqp1#

试试这个：

$("#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）回复(0）举报 2022-11-27

bfnvny8b2#

'blur'是一个当用户'unfocus'当前聚焦的字段时调度的事件。您可以在jQuery中使用blur方法直接监听该事件，如下所示：

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

祝你好运！

赞(0）回复(0）举报 2022-11-27

yhqotfr83#

使用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）回复(0）举报 2022-11-27

我来回答

css jquery向右展开< li>并向左折叠

3条答案

相关问题

热门标签

最新问答