切换按钮问题

Question

如果我点击搜索图标，它将打开返回按钮和搜索栏。我再次点击后退按钮，它将打开搜索图标

我尝试使用内部html。

如果我点击搜索图标，我使用innerhtml来显示返回按钮和搜索栏。但若我点击后退按钮，如何呈现搜索图标？

container.insertAdjacentHTML('afterbegin', `
<header>
<div id="chat-icon">
<div class="search"><i class="fas fa-search"></i></div>
<div id="chat"><i class="far fa-edit"></i></div>
</div>
</header>
<div id="group-list"></div>`);
container.querySelector('header #chat-icon #chat').addEventListener('click', async() => {
this.chat.container.querySelector('.groups').remove();
this.chat.container.insertAdjacentElement('afterbegin', this.createGroup.container);
await this.createGroup.load();
});
container.querySelector('header .search').addEventListener('click', async() => {
this.chat.container.querySelector('header .search').innerHTML = `
<div class="heading">
<div id="back-button"><i class="fa fa-arrow-left"></i></div>
<div id="search-bar"></div>   
</div>`
})

Answer 1

您可以使用.hide隐藏搜索栏，使用.show()显示搜索栏，而不是使用.remove()和.load()。