使用 jQuery 添加元素后隐藏搜索栏

Question

我尝试在更改类后隐藏jquery中的搜索栏我的问题是当我单击元素以隐藏搜索栏时，没有任何反应我尝试添加这个：

$('#menu_bas').on('click', ".fa-times", function () {
    $('.c_hover').css('display', 'initial');
    $('#wrapper-category').css('text-align', 'middle');
    $('#search_input').css('display', 'none');
    $('.fa-times').addClass('fa-search');
    $('.fa-times').removeClass('fa-times');
});

这是我的jsfiddle：https://jsfiddle.net/Lqsqgxpn/5/

Answer 1

您需要在这两种情况下使用委托，因为您将它应用于同一元素，但希望根据当前类进行区分。

否则，.fa-search点击处理程序将在两次点击和

混乱中运行

      $('#menu_bas')
        .on('click', '.fa-search', function() {
          $('.c_hover').css('display', 'none');
          $('#wrapper-category').css('text-align', 'right');
          $('#search_input').css('display', 'inline-block');
          $('.fa-search').addClass('fa-times');
          $('.fa-search').removeClass('fa-search');
        })
        .on('click', ".fa-times", function() {
          $('.c_hover').css('display', '');
          $('#wrapper-category').css('text-align', '');
          $('#search_input').css('display', 'none');
          $('.fa-times').addClass('fa-search');
          $('.fa-times').removeClass('fa-times');
        });

更新的小提琴：https://jsfiddle.net/Lqsqgxpn/24/

---

不过，最好只将类切换到#menu_bas元素，并通过CSS处理所有更改

喜欢这个

$('#menu_bas')
    .on('click', '.fa-search, .fa-times', function() {
      $('#menu_bas').toggleClass('search-active');
      $(this).toggleClass('fa-times fa-search');
});

和

.search-active .c_hover {display: none}
.search-active #wrapper-category {text-align: right}
.search-active .search_input {display: inline-block;}

更新的小提琴：https://jsfiddle.net/Lqsqgxpn/29/