2017-04-13 137 views

回答

2

slideToggle()toggleClass()是射擊海誓山盟相反。當你的容器被顯示時,輸入被隱藏 - 當顯示輸入時,容器被隱藏。

只需在最初添加一個display: none;search-container,以便容器和輸入都處於相同狀態。

.search-container { 
    display: none; 
    /*...the rest of your CSS*/ 
} 

這裏是你的固定例如:https://codepen.io/anon/pen/WjbwPo


編輯:請查看Daniel H's answer - 他做一個好點。只需加入display: none;將導致第一次點擊的問題。考慮改爲移動display: none;search-container input改爲search-container


您可能想知道我的意思,考慮到加載時容器顯然不在頁面上;重要的是要認識到它沒有顯示的唯一原因是因爲它的所有內容(輸入)都是隱藏的。如果右鍵單擊頁面並轉到檢查元素,可以非常清楚地看到,當您單擊搜索圖標時,display: none;正在被添加到search-container,同時show正在被添加到輸入中。

1

我認爲你需要從search-container input移動display: none;search-container,沒有必要隱瞞的子元素,只是藏容器。

codepen: https://codepen.io/hdl881127/pen/EmaKeL

$(document).ready(function() { 
    $('#search-icon').click(function() { 
    $(".search-container").slideToggle("400"); 
    }); 
}); 
+1

@Santi我會upvote你的,但你的解決方案將錯過第一次點擊。你需要移動顯示:無;從搜索容器輸入到搜索容器。 –

+0

你是對的,我很抱歉。我刪除了我的評論。 – Santi

相關問題