0

我有以下 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);

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

问题：我必须单击 2 次才能执行该功能。

第二个问题： 我必须在 Javascript 函数中添加什么代码才能使表单输入自动聚焦？现在，只有当我重新加载页面时，自动对焦才有效。

非常感谢！！

编辑：

已解决的问题

@Zlatan O. - 非常感谢！我自己找到了解决方案:-)

问题是在第一次点击时 display:block 没有设置。在第一次单击后显示：块已设置等第二次单击它起作用。

这是不使用 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";
  }


}

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

再次非常感谢你！！

4

1 回答 1

0

在 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-11T22:57:17.383 回答