クリックして検索アイコンをクリックポップアップ検索ボックス

Question

アイコンを押すとアイコンやポップアップに問題があります。 jsfiddle

私はアイコンを押したときにそれが表示されていない私は、アイコンの周りに押した場合、それは示しています

<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'); 
      } 
     } 
    }); 
}); 

全コード：ここでは、コードの一部です。私は何を変えるべきですか？ありがとう。

Answer 1

JSコードにはいくつかの論理的な問題があります。あなたの主な問題は、イベントを発生させた要素を取得するためにe.targetを使用することです。これは、イベントバインドされた要素内に多くの子要素があるため、問題です。これを解決するには、単にイベントを発生させた要素を参照するのにthisキーワードを使用します。

ifステートメントを削除して、要素のidを確認することができます。 clickイベントがidにバインドされているため、これは冗長なので、常にtrueになります。

最後に、jQueryのtoggleClass()メソッドを使用するだけで、クラス検査ロジックを簡素化できます。これを試してみてください：

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

Working example