javascript - 无法在单击显示按钮时制作搜索字段并在关闭时隐藏

Question

我试图在单击搜索字段时显示提交按钮，并且我还试图在字段关闭时隐藏它（位于主导航栏中的表单）...

这是我的代码：

$(document).ready(function(){
  $("#search-click").click(function(){
    $(".search-form .search-submit").css("display" , "block");
  });
});

它根本不起作用......这是我的链接：http ://dev.pixstreammedia.com.s150147.gridserver.com/system/

Answer 1

1.您没有显示正确的 id ：您的按钮有 id ：search-submit-button并且您显示阻止了其他元素但没有显示此 id，因此解决方案是添加 #search-submit-button到您的显示块功能。

2.至于隐藏你可以做一个mouseleave，上课：search-form然后隐藏按钮。

Answer 2

试试这个：

http://jsfiddle.net/5UJ5U/1/

HTML：

<form>
    <input type="search" class="searchclick" placeholder="search">

    <input type="submit" class="sub" value="search">
</form>

JS：

$(".sub").hide();
$(document).ready(function(){
  $(".searchclick").click(function(){
    $(".sub").fadeToggle('fast');
  });
});

Answer 3

它的工作按钮只是藏在下面。同样在控制台中，$ 没有分配给 jQuery，所以我直接手动使用你的代码片段和 jQuery。

jQuery(".search-form .search-submit").css("display" , "block");

将其输入到您的 js 控制台以查看按钮是否存在，但您只能看到其中的一小部分。