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

单击searchitem链接时应执行Javascript函数（1次）。

问题：我必须单击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";
  }


}

也许这不是最好的解决方案 - 我不知道 - 但它有效： - ）

再次非常感谢你！

Answer 1

在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();
    });
});

完成！

Javascript onclick功能 - 需要2次点击才能工作

1 个答案: