点击展开搜索栏问题解决：锚点/按钮失效与导航栏样式冲突

问题1：包裹在<a>/<button>标签的SVG点击无响应 #

原因 #

• <a>标签的href=""会触发页面默认跳转行为，刷新页面后丢失expanded类状态
• 若使用<button>且未指定type="button"，默认是submit类型，会触发表单提交导致页面刷新

修复方案 #

在搜索按钮的点击事件中阻止默认行为，修改JavaScript代码：

searchInput.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止a标签跳转/button提交的默认行为
  searchContainer.classList.add('expanded');
});

如果改用<button>标签，需添加type="button"属性避免表单提交：

<button class="search-button" type="button">
  <svg>...</svg>
</button>

问题2：居中.main-navbar导致.expanded样式异常 #

原因 #

父元素.main-navbar的transform: translateX(-50%)会使子元素.search-bar的position: fixed定位失效——CSS规范中，当父级存在transform属性时，fixed定位元素会以父元素为定位上下文，而非视口，导致全屏展开样式异常。

修复方案 #

替换.main-navbar的居中方式，用margin: 0 auto替代left:50% + transform，修改CSS：

.main-navbar {
  display: inline-flex;
  width: 100%;
  max-width: 900px;
  position: relative;
  padding-bottom: 17px;
  top: 0px;
  z-index: 10;
  /* 移除原居中代码 */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  margin: 0 auto; /* 新增：实现水平居中 */
}

修改后的完整代码 #

HTML

<div class="main-navbar">
  <div class="search-bar">
    <form>
      <input class="search " placeholder="Search">
      <a class="search-button" href="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
          <rect width="256" height="256" fill="none"/>
          <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/>
          <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/>
        </svg>
      </a>
    </form>
    <div class="suggestion-box">
      <p> Popular Search</p>
      <p>Shoes</p>
      <p>shirts</p>
      <p>Jackets</p>
    </div>
  </div>
</div>

CSS

.expanded {
  position: fixed;
  top: 0rem;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: red; /* 修复原代码错误：CSS颜色值不能加单引号 */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.main-navbar {
  display: inline-flex;
  width: 100%;
  max-width: 900px;
  position: relative;
  padding-bottom: 17px;
  top: 0px;
  z-index: 10;
  margin: 0 auto;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-left: -2px;
}

.search-button svg {
  width: 26px;
  height: 26px;
  opacity: 0.9;
  border-radius: 20px;
}

.search-button svg {
  cursor: pointer;
}

.search:focus {
  outline: none;
}

.expanded .search-button {
  display: none;
}

.search-bar.expand {
  width: 100%;
  max-width: 600px;
}

.search-bar.expanded form {
  width: 100%;
  max-width: 800px;
}

.expanded .search {
  width: 100%;
  background-color: transparent;
  color: black;
  padding: 10px;
  font-size: 24px;
}

.search {
  display: none;
}

.search-bar.expanded .search {
  display: block;
}

.search-bar.expanded .suggestion-box {
  display: block;
  width: 100%;
  padding: 10px;
  max-width: 800px;
  box-shadow: 0px 0px 8px 1px #c8c8c8;
}

.search-bar.expanded {
  display: flex;
  flex-direction: column;
}

.suggestion-box {
  display: none;
}

JavaScript

const searchContainer = document.querySelector('.search-bar');
const searchInput = document.querySelector('.search-button');
const closeButton2 = document.getElementById("search-close");
const clearButton = document.getElementById("clear-button");
const htmlElement = document.body;

searchInput.addEventListener('click', function(event) {
  event.preventDefault();
  searchContainer.classList.add('expanded');
});

document.addEventListener('click', function(event) {
  if (!searchContainer.contains(event.target)) {
    searchContainer.classList.remove('expanded');
  }
});

内容的提问来源于stack exchange，提问作者user22546916