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/

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

1 个答案: