jquery - 单击弹出搜索框上的搜索图标

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 来获取引发事件的元素。这是一个问题，因为事件绑定(bind)元素中有很多子元素。要解决这个问题，您可以简单地使用 this 关键字来引用引发事件的元素。

然后您可以删除检查元素的 id 的 if 语句。这是多余的，因为点击事件绑定(bind)到该 id，因此它始终为 true。

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

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

Working example