javascript - CSS在文档点击时向下滑动和向上滑动

Question

我这里有个问题。我正在尝试在 CSS3 转换中执行 slideUp 和 slideDown 等效项，但也希望在单击文档时 div 元素向上滑动。

这是代码 http://jsfiddle.net/RK8FZ/2/

HTML

<div id="main">
   <div id="search-content">
      <input type="search" placeholder="Search"/>
      <input type="submit" />
   </div>
   <section class="wrapper">
      <span id="toggle-search">Search</span>
   </section>
</div>

这是CSS代码

#main #search-content { position: relative; max-height: 0; overflow: hidden; transition: all .3s linear; background: #FFF; opacity: 0;}
#main #search-content.open { max-height: 200px; opacity: 1; }

这是jquery代码

    function toggleSearch() {

    $('#toggle-search').on('click', function(event){
        $('#search-content').toggleClass('open').find('input[type="search"]').focus();
        $(this).text( $(this).text() === "Search" ? "Close" : "Search" ); 
    })

    $('#search-content').on ('click', function(e) {
     e.stopPropagation();
    });

    $(document).on('click', function() {
        if( $('#search-content').hasClass('open') ) {
            $('#search-content').removeClass('open');
        }
    });

}

任何人都可以弄清楚这件事吗？正在发生的事情是它同时触发了开盘和收盘。

Answer 1

$(document).on('click', function () {
    if ($(this).addClass('search-open')) {
        $('#search-content').removeClass('open');
    }
});

你在检查什么条件？如果你想检查是否存在搜索开放类，那么你可以使用

    if ($(.search-open').length > 0) 

Answer 2

工作演示

我想这就是你需要的

    $(function () {
        toggleSearch();
    })

    function toggleSearch() {

        $('#toggle-search').on('click', function (event) {
            event.stopPropagation();
            $('#search-content').toggleClass('open').find('input[type="search"]').focus();
            $(this).text($(this).text() === "Search" ? "Close" : "Search");
        })


    }
    $(document).on('click', function (e) {
        $('#toggle-search').text('Close');
        $('#search-content').removeClass('open');
    });
$('#search-content').on('click', function (e) {
 e.stopPropagation();
});