Question

我目前有一个jQuery下拉菜单，点击一个按钮，然后会出现一个搜索框。因此，当用户点击该按钮后菜单下降时，搜索框需要保持打开/活动状态，直到有人点击搜索框中的外部。

目前这个脚本效果很好，但是当在搜索框内单击时，它会关闭。我只需要在搜索框中单击外部而不是在其中时关闭菜单。任何帮助将不胜感激！

// HTML

<div class="click-nav">
  <ul class="searchbox">
    <li> <a class="tnsearch">Search Button</a>
      <ul id="searchboxul">
        <li>
          <div id="search-box">
            <!--Search box here-->
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

//脚本

<script type="text/javascript">
$(function() {
    $('.click-nav > ul').toggleClass('searchbox js');
    $('.click-nav .js ul').hide();

    $('.click-nav .js').click(function(e) {
        $('.click-nav .js ul').slideToggle(200);
        $('.tnsearch').toggleClass('active');
        e.stopPropagation();
    });

    $(document).click(function() {
        if ($('.click-nav .js ul').is(':visible')) {
        $('.click-nav .js ul', this).slideUp();
        $('.tnsearch').removeClass('active');
        }
    });
});

Answer 1

你只需要使用$（＆＃39; .click-nav .js .tnsearch＆＃39;）。点击（function（e）{因为这指向特定的元素。请参阅下面的代码并小提琴。

工作小提琴FIDDLE

$(function() {
$('.click-nav > ul').toggleClass('searchbox js');
$('.click-nav .js ul').hide();
$('.click-nav .js .tnsearch').click(function(e) {
$('.click-nav #searchboxul').slideToggle(200);
$('.tnsearch').toggleClass('active');
e.stopPropagation();
});

});
$(document).click(function(e){
    var targerEl=$(e.target);
    if(targerEl.is("html"))
    {
       $('.click-nav #searchboxul').slideUp(200);
    }
});

需要jQuery下拉菜单才能在有人点击它之外关闭

1 个答案: