Question

Here是我的网址。

您可以在此处看到右上角的搜索栏。如果单击搜索图标，它将显示一个搜索框。再说一遍，如果你再次点击搜索图标，它应该关闭搜索框，如滑动效果，但它不起作用。

JQuery代码：

jQuery(document).ready(function(){
  jQuery('#search2').on("click",(function(e){
    jQuery(".form-group").addClass("sb-search-open");
      e.stopPropagation()
    }));
    jQuery(document).on("click", function(e) {
      if (jQuery(e.target).is("#search2") === false && jQuery(".form-control").val().length == 0) {
        jQuery(".form-group").removeClass("sb-search-open");
      }
    });
    jQuery(".form-control-submit").click(function(e){
      jQuery(".form-control").each(function(){
      if(jQuery(".form-control").val().length == 0){
        e.preventDefault();
        jQuery(this).css('border', '2px solid red');
      }
    })
  })
})

我该如何解决？

Answer 1

更改＆＃34; addClass＆＃34;在第三行到＆＃34; toggleClass＆＃34;：

    jQuery(".form-group").toggleClass("sb-search-open");

Answer 2

根据您的代码，当您点击搜索图标本身以外的任何其他地方时，您似乎正在关闭搜索栏

jQuery(e.target).is("#search2") === false

它按预期工作，如果你想要它的行为，那么用false替换false。

Answer 3

试试这段代码。

jQuery(document).ready(function(){
  jQuery('#search2').on("click",(function(e){
    jQuery("#search").toggleClass("sb-search-open");
      e.stopPropagation()
    }));

});

jQuery滑入和滑出问题

3 个答案: