问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery 实现搜索框失去焦点时隐藏自动提示下拉容器

头像
_Zhijun
    1672512

    搜索输入框获取焦点时，自动显示下面的下拉列表容器，

    $(input).focus(function(){
    container.addClass("hide")
})

    当输入框失去焦点时，自动隐藏

    $("input").focusout(function(){
    $(".suggestion-container").addClass("hide")
});

    这里还有一个条件，如果鼠标点击下面的下拉列表容器，不希望隐藏下拉列表容器。这要怎么实现呢？

    image.png

    jqueryjavascript前端
    阅读 3.1k
    1 个回答
    得票最新
    头像
    jsdeferred
      3.4k21317
      ✓ 已被采纳

      把blur就关闭的逻辑换成判断点击区域符合再关闭的逻辑就行

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Static Template</title>
    <style>
      .input-container {
        position: relative;
      }

      .dropdown {
        position: absolute;
        width: 100%;
        height: 100px;
        background: indianred;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input placeholder="输入" />
      <div class="dropdown"></div>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $("input").focus(() => {
      $(".dropdown").show();
    });

    $(document).click((e) => {
      if (!$(".input-container").get(0).contains(e.target)) {
        $(".dropdown").hide();
      }
    });
  </script>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题