点击弹出式搜索框中的搜索图标

Question

当图标被按下时，我遇到了图标和弹出窗口的问题。下面是部分代码：

<div class="searchlink" id="searchlink"> 
    <i class="fa fa-search fa-custom"></i> 
    .... 
</div> 

$(function() { 
    var $searchlink = $('#searchlink'); 

    $searchlink.on('click', function(e) { 
     var target = e ? e.target : window.event.srcElement; 
     if ($(target).attr('id') == 'searchlink') { 
      if ($(this).hasClass('open')) { 
       $(this).removeClass('open'); 
      } else { 
       $(this).addClass('open'); 
      } 
     } 
    }); 
}); 

全码：jsfiddle

当我按下图标它没有显示，它表明如果我按各地图标。我应该改变什么？谢谢。

Answer 1

你的JS代码有几个逻辑问题。你的主要问题是使用e.target来获得引发事件的元素。这是一个问题，因为事件绑定元素中有很多子元素。要解决它，你可以简单地使用关键字this来引用引发事件的元素。

然后，您可以删除if语句，检查元素的id。这是多余的，因为点击事件绑定到那个id，所以它总是true。

最后，您可以通过使用jQuery的toggleClass()方法来简化类检查逻辑。试试这个：

$(function() { 
    $('#searchlink').on('click', function(e) { 
     $(this).toggleClass('open'); 
    }); 
}); 

Working example