可點擊按鈕在外部搜索表單中顯示「高級選項」？

Question

我是一位圖書管理員，對基本的html和css有一定的經驗。我正試圖重建我們的主要搜索功能，以便它更加可用。

我試圖讓「高級搜索」選項，以使我們的搜索功能的工作原理與此類似圖書館網站打開和關閉：https://zsr.wfu.edu/（點擊旁邊的「我們能幫助您找到的向下箭頭？）

。

這是我的：https://jsfiddle.net/nmb2p7ys/2/。我可以通過鼠標懸停來顯示高級搜索，但這就是全部。我相當確定問題出在JS上，但我真的不知道，我試過了一切。

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

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

我猜我犯了一些基本的錯誤，特別是與JS。我欣賞任何hel p！

Answer 1

你可以聽上<input>的焦點事件，並顯示testpanel：

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

然後你就可以當用戶點擊箭頭按鈕切換testpanel：

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

雖然它似乎要工作，你有另一個問題，這是當用戶選擇下拉菜單中的選項切換下拉菜單。

發生這種情況是因爲您的html不正確，並且您的所有下拉html都在箭頭按鈕內。所以當你點擊選項時，你實際上也在點擊箭頭。

如果您檢查您提供的示例網站，您會看到它們以不同的方式構建它，並將兩者分開。我建議重構你的html來解決這個額外的問題。