Trung tâm cá nhân
sách gpt4 ai đã đi

Mở rộng Tìm kiếm Đóng Nhấp vào Đóng JQuery

In lại 作者：行者123 更新时间：2023-11-28 06:30:59 28 4
mua khóa gpt4 Nike

我昨天制作了一个扩展的 JQuery 搜索框，它的作用就像一个魅力!但是，我在创建一个脚本时遇到问题，当用户单击搜索框时，它会关闭。

这是我的 JQuery:

function expandSearch(){
                $('#search-input').toggleClass('search-input-open');
         }

这是我的 HTML:


    

        
        🔎


还有我的 CSS:

.ngen-search{
    padding:0px 0px 0px;
}
.form-search-input{
    width:0px;
    height:55px;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 0px;
    color: #151515;
    transition: all 0.5s;
}
.search-input-open{
    width:410px !important;
    padding: 0px 0px 0px 20px !important;
    display: initial !important;
}
.form-search-submit{
    display:inline-block;
    width:55px;
    height:43px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

感谢所有帮助!谢谢!

另外，请注意，我对 JQuery 很陌生，很少使用它。

1 Câu trả lời

您可以编写一个点击处理程序来监听页面中任意位置的点击，然后删除该类，例如

jQuery(function($) {
  $('#search-trigger').click(function() {
    $('#search-input').toggleClass('search-input-open');
  });

  $(document).click(function(e) {
    if (!$(e.target).closest('.ngen-search-form').length) {
      $('#search-input').removeClass('search-input-open');
    }
  })
})
.ngen-search {
  padding: 0px 0px 0px;
}
.form-search-input {
  width: 0px;
  height: 55px;
  border: 0;
  outline: 0;
  font-size: 21px;
  padding: 0px 0px 0px 0px;
  color: #151515;
  transition: all 0.5s;
}
.search-input-open {
  width: 410px !important;
  padding: 0px 0px 0px 20px !important;
  display: initial !important;
}
.form-search-submit {
  hiển thị: khối nội tuyến;
  width: 55px;
  height: 43px;
  border: 0;
  outline: 0;
  background-color: #151515;
  font-size: 21px;
  color: white;
  cursor: pointer;
  căn chỉnh văn bản: ở giữa;
}


  

    
    🔎

关于javascript - 展开搜索 关闭 单击“关闭 JQuery”，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34714583/

28 4 0
Bài viết được đề xuất: javascript - Django - 使用 JavaScript 进行实时更新
Bài viết được đề xuất: javascript - 我想在选择下拉列表的最后一个选项时提交表单 选项是动态生成的
Bài viết được đề xuất: javascript - 推送到数组不会通过 ng-repeat 指令更新 View 列表
Bài viết được đề xuất: javascript - 从 Angular Directive(指令)获取数据
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com