问在外部搜索表单中显示“高级选项”的可点击按钮？
EN

Stack Overflow用户

提问于 2017-07-27 02:33:06

回答 1查看 28关注 0票数 1

我是一个图书管理员，对基本的html和css有一些有限的经验。我正在尝试重建我们的主要搜索功能，以便它更有用。

我正在尝试打开和关闭“高级搜索”选项，以便我们的搜索功能类似于这个库网站：https://zsr.wfu.edu/ (单击“我们能帮你找到什么？”旁边的向下箭头)。

这是我所拥有的：https://jsfiddle.net/nmb2p7ys/2/。我可以通过鼠标悬停来显示高级搜索，但仅此而已。我相当确定问题出在JS上，但我真的不知道，我已经试过了所有的方法。

$("#oneschddtest").click(function()
{   

$("#testpanel").toggle();     
});

我猜我犯了一些基本的错误，特别是在JS上。感谢大家的帮助！

发布于 2017-07-27 02:55:14

您可以在<input>上收听focus事件并显示testpanel

$("#lindellOneSearch-search-str").focus(function()
{   
    $("#testpanel").show();     
});

然后，您可以在用户单击箭头按钮时切换testpanel：

$(".OneSearchdropbtn").click(function(){
    $("#testpanel").toggle();
});

尽管它看起来很好用，但你还有另一个问题，那就是当用户选择下拉菜单中的选项时，它会切换出下拉菜单。

这是因为您的html不正确，所有的dropdown html都在箭头按钮内。因此，当您单击这些选项时，实际上也是在单击箭头。

如果你检查你给出的示例站点，你会发现它们的结构是不同的，并且将两者分开。我建议重新构建你的html来解决这个额外的问题。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45334912

复制

相似问题

问在外部搜索表单中显示“高级选项”的可点击按钮？EN