首先需要知道DOM addEventListener() 方法和DOM classList 屬性
html代碼：
<body> <div class="container"> <div class="bottom"> <div class="app"> <div class="search"> <!-- <p class="talk">前天遇見了兔子，昨天遇見了鹿，今天遇見了你</p> --> <input class="searchInput" type="text"> <button><i class="fa fa-search" aria-hidden="true"></i></button> </div> <script src="/js/search.js"></script> </div> </div> </div> </body>
css代碼：
.container .app .search { position: relative; display: flex; flex-direction: row; top: 35vh; justify-content: center; transition: all 1s; } .container .app .search input { width: 0px; height: 8vh; border: 0; background: rgba(0,0,0,.3); outline: 0; transition: all 1s; line-height: 8vh; font-size: 1.5rem; } .container .app .search button { width: 6vw; height: 8vh; border: 0; cursor: pointer; background: rgba(0,0,0,.3); transition: all 1s; } .container .app .search button i { font-size: 1.2rem; } .container .app .search .searchInput.active { width: 40vw; padding: 0 10px; border: 0; }
JS代碼：
let searchInput = document.querySelector(".searchInput");
let button = document.querySelector("button");
button.addEventListener("click",() => {
if(searchInput.classList.contains("active")) {
window.open("https://www.baidu.com/s?wd="+searchInput.value+"&ie=utf-8","_blank","")
} else {
searchInput.classList.toggle("active");
}
});