javascript - 搜索呈现问题中的数字

Question

所以我有一些代码，其中 jQuery 和 CSS 用于在单击搜索图标后创建一个关闭图标。它使用相同的 div 元素，因为它应该为自身设置动画(在我们的例子中不是)。在我工作时(不影响与以下搜索图标有关的任何内容)，我意识到其中一个 div 高度不合适。如果您查看 CSS，您会发现有两个类为“search2”的 div，其中一个的高度或比例不正确。我尝试调整窗口大小，但它并没有消失。 enter image description here

所以我有一个带有这段代码的搜索图标:

function toggleSearch(){
    $('.mobile-search-button').toggleClass('expand');
}

.mobile-search-button {
	position: absolute;
	top: 5px;
	right: 15px;
	width: 50px;
	height: 50px;
	border: none;
	overflow: hidden;
}

.mobile-search-button * {
	position: relative;
	bottom: 4px;
	left: 1px;
}

.search1 {
	width: 12px;
	height: 12px;
	border: 2px solid black;
	border-radius: 100px;
}
.search2 {
	width: 10px;
	height: 2px;
	background: black;
	-webkit-transform: rotate(45deg) translate(5px,-5px);
	-ms-transform: rotate(45deg) translate(5px,-5px);
	transform: rotate(45deg) translate(5px,-5px);
}
.search3 {
	opacity: 0;
}
.mobile-search-button .search1 {
	-webkit-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
	-ms-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
	transform: rotate(45deg) translate(5px,-5px) scale(1.75);
}
.mobile-search-button .search2 {
	-webkit-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
	-ms-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
	transform: rotate(45deg) translate(19px,-9px) scale(1.75);
}
.mobile-search-button.expand .search1 {
	-webkit-transform: rotate(45deg) translate(9px,-10px) scale(5);
	-ms-transform: rotate(45deg) translate(9px,-10px) scale(5);
	transform: rotate(45deg) translate(9px,-10px) scale(5);
	opacity: 0;
}
.mobile-search-button.expand .search2 {
	-webkit-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
	-ms-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
	transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
}
.mobile-search-button.expand .search3 {
	-webkit-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
	-ms-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
	transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
	opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
			<div class="search1"></div>
			<div class="search2"></div>
			<div class="search2 search3"></div>
		</button>

更新:我将 div.search2 的高度从 2px 更改为 1.75px，它似乎有效

Answer 1

我认为 CSS 可以做得更简单。

function toggleSearch() {
  $('.mobile-search-button').toggleClass('expand');
}

.mobile-search-button {
  position: absolute;
  top: 5px;
  right: 15px;
  width: 50px;
  height: 50px;
  border: none;
}

.search1,
.search2 {
  background: black;
  height: 36px;
  left: 50%;
  margin: -18px 0 0 -2px;
  position: absolute;
  transition: 200ms;
  top: 50%;
  width: 4px;
}

.search1 {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.search2 {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.expand .search2 {
  background: #dddddd;
  border: 4px solid black;
  border-radius: 100%;
  height: 20px;
  left: 7px;
  margin: 0;
  top: 6px;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
        <div class="search1"></div>
        <div class="search2"></div>
</button>