的Javascript的onclick功能 - 點擊2次工作

需要，我有以下的Javascript代碼：的Javascript的onclick功能 - 點擊2次工作

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

單擊searchitem鏈接時應執行Javascript函數（1次）。

問題：我必須點擊2次才能執行該功能。

第2個問題： 需要添加什麼代碼才能自動關注表單輸入的Javascript函數？現在，只有當我重新加載頁面時，自動對焦才起作用。

非常感謝！

編輯：

問題解決

@Zlatan O. - 非常感謝你！我自己找到了一個解決方案:-)

問題是在第一次點擊顯示：塊沒有設置。第一次點擊顯示：塊已經設置，等第二次點擊它的工作。

這裏是工作的代碼，而無需使用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"; 
    } 


}

也許它不是最好的解決辦法 - 我不知道 - 但它的作品:-)

再次非常感謝你！！

來源

2013-07-11 Simon H.

http://www.codeproject.com/Articles/157446/What-is-jQuery-and-How-to-Start-using-jQuery – 2013-07-11 22:37:45

謝謝 - 但你能更具體嗎？如果可能，我想在這裏避免使用jquery –

您不應該冒充DOM！ – 2013-07-11 22:42:19

在jQuery中，你可以做這樣的：

$(document).ready(function() { 
    $('li#searchitem a').click(function() { 
     $('#searchitem, #topsearchform').toggle(); 

      $('input[name="search_text"]').focus(); 
    }); 

    $('input[name="search_text"]').blur(function() { 
     $('#searchitem, #topsearchform').toggle(); 
    }); 
});

完成！

來源

2013-07-11 22:57:17

非常感謝！不幸的是，它不適用於我:(我用你的代碼替換了我的JavaScript文件中的代碼。結果是代碼沒有執行。我使用WordPress並且jquery默認加載。我會稍微更新我的問題 –

爲什麼你不進行逆向工程，讓它自己工作呢？ – 2013-07-11 23:04:45

belive me - 我試過了！但是我無法根據自己和經驗等級找到解決方案。我一直在論壇和這個網站上搜索很多。（無論如何謝謝你的幫助！真的很感謝！不幸的是我不能投票你的答案，因爲我的名聲太低 –

的Javascript的onclick功能 - 點擊2次工作

回答

相關問題