Question

我正在尝试根据输入字段的值禁用切换功能。以下是标记

<ul>
  <li><input type="text" class="search" placeholder="Search..." id="search"></li>
  <li><button type="submit" id="search-submit"><span></span></button></li>
</ul>

最初，搜索输入的宽度设置为0.在单击提交按钮时，会添加一个切换类，它将为文本输入的宽度设置动画。如果文本输入中有任何值，则单击提交按钮时，它应重定向到页面，但不应切换。我尝试了下面的javascript，但不知何故无法禁用切换。

$('.sm-search button').click(function () {
 $('.search').toggleClass('search-expand');
});
$('.search').on('change keyup paste', function () {
 if ($(this).val() != "") {
  $('.sm-search button').click(function () {
   window.location.href = "/some-url";
   $('.search').addClass('search-expand');
  });
 } 
});

Answer 1

您的jQuery选择器与您的HTML类不匹配，但这可能只是一个问题。

这里发生的事情是：

在按钮中添加多个JS-listener，这些都是执行的。如果你想要你的代码，你必须删除最初的＆＃34;点击＆＃34; -listener。

尝试：

$('.sm-search button').click(function () {
 $('.search').toggleClass('search-expand');
});
$('.search').on('change keyup paste', function () {
 if ($(this).val() != "") {
  $('.sm-search button').off('click').click(function () {
   window.location.href = "/some-url";
   $('.search').addClass('search-expand'); // this shouldn't be necessary anymore, since you do not toggle the class anymore
  });
 } else {
    $('.sm-search button').off('click').on('click', function () {
      $('.search').toggleClass('search-expand');
    });
 }
});

根据条件禁用切换

1 个答案: