Question

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

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

如果有条件，你还在检查什么？如果要检查是否存在search-open类，则可以使用

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

Answer 2

工作DEMO

我想这就是你需要的东西

    $(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();
});

CSS单击下滑并向上滑动文档

2 个答案:

工作DEMO