javascript - Javascript の onclick 関数 - 動作させるには 2 回のクリックが必要

Question

次の Javascript コードがあります。

function toggleSearch() {
  if(document.getElementById("searchitem").style.display == "block" ) {
    document.getElementById("searchitem").style.display = "none";
    document.getElementById("topsearchform").style.display = "block";
  }
  else {
    document.getElementById("searchitem").style.display = "block";
  }


}

function backtonormal() {
  if(document.getElementById("searchitem").style.display == "none" ) {
    document.getElementById("searchitem").style.display = "block";
    document.getElementById("topsearchform").style.display = "none";
  }
  else {
    document.getElementById("searchitem").style.display = "none";
  }


}

そして、次の HTML コード:

<li id="searchitem">
  <a href="#" onclick="toggleSearch();"><span>Search<span class="cursor"></span></span></a></li>
   <li>
     <div id="topsearchform">
<form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">
 <input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/>
<input type="button" name="button" class="button">
   </a>
    </form>
   </div>
</li>

コードは、次のように作成したカスタム wordpress メニュー項目用です。

function wpa_58902($items, $args){
if( 'main-menu' === $args -> theme_location ) {
    $search = '<li id="searchitem"><a href="#" onclick="toggleSearch();"><span>Search<span class="cursor"></span></span></a></li>';
    $search .= '<li><div id="topsearchform"><form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">';
    $search .= '<input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/><input type="button" name="button" class="button"></a></form></div></li>';

}
    return $items . $search;
}
add_filter('wp_nav_menu_items','wpa_58902',10,2);

検索項目のリンクがクリックされたとき (1 回) に Javascript 関数を実行する必要があります。

問題: 関数を実行するには、2 回クリックする必要があります。

2 番目の問題: フォーム入力が自動的にフォーカスされるようにするには、Javascript 関数にどのコードを追加する必要がありますか? 現在、オート フォーカスは、ページをリロードした場合にのみ機能します。

どうもありがとうございました！！

編集：

解決した問題

@Zlatan O.-ありがとうございました！私は自分で解決策を見つけました:-)

問題は、最初のクリックで display:block が設定されていなかったことです。最初のクリックで display:block が設定され、2 回目のクリックで機能しました。

jqueryを使用しない作業コードは次のとおりです。

function toggleSearch() {
document.getElementById("searchitem").style.display = "block";
  if(document.getElementById("searchitem").style.display == "block" ) {
    document.getElementById("searchitem").style.display = "none";
document.getElementById("topsearchform").style.display = "block";
document.getElementById('search_text2').focus();
  }
  else {
    document.getElementById("searchitem").style.display = "block";
  }


}

function backtonormal() {
  if(document.getElementById("searchitem").style.display == "none" ) {
    document.getElementById("searchitem").style.display = "block";
document.getElementById("topsearchform").style.display = "none";
document.getElementById('search_text2').focus();

  }
  else {
    document.getElementById("searchitem").style.display = "none";
  }


}

多分それは最善の解決策ではないかもしれません-私にはわかりません-しかし、それは機能します:-)

改めまして、誠にありがとうございました!!