點擊彈出式搜索框中的搜索圖標

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