通过JS为元素添加类名

首先需要知道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");
    }
});