我希望有两种搜索框样式,一种高于1000px,一种低于1000px。我通过CSS中的媒体查询使其可用,然后我将函数点击我的元素,但它只触发一次,然后我需要刷新页面才能再次执行。我是所有这一切的新手,我已经为这个问题寻找解决方案八小时了。我认为问题是由搜索表单引起的 - 当您单击搜索触发器时处于活动状态。但是,当我在1000px宽的范围内浏览时,我不知道如何禁用此功能。
我正在使用已创建主题的WordPress,名为Yuuta。
$(document).on('click', '.search-trigger', function() {
$('.search-overlay').addClass('show');
if ($('.site-header .search-form').hasClass('search-form--active')) {
/* hide search field */
$('.site-header .search-form').removeClass('search-form--active');
} else {
/* show search field */
$('.site-header .search-form').addClass('search-form--active');
/* focus search field */
$('.site-header .search-field').focus();
}
/* show/hide search form via search icon */
if ($('.site-header .search-trigger').hasClass('search-form--active')) {
/* hide search field */
$('.site-header .search-trigger').removeClass('search-form--active');
} else {
/* show search field */
$('.site-header .search-trigger').addClass('search-form--active');
}
});

.search-trigger {
position: absolute;
right: 0.5em;
top: 28px;
width: 40px;
text-align: center;
}
@media screen and (min-width: 40em) {
.search-trigger {
right: 0.8em;
}
}
.search-trigger:before {
width: 100%;
display: block;
font-family: "ElegantIcons";
font-weight: normal;
text-align: center;
content: "\55";
}
.search-trigger:before::after {
clear: both;
content: "";
display: table;
}
.search-trigger.search-form--active:before {
font-size: 1.6em;
line-height: .9em;
content: "\4d";
}
.search-trigger:hover {
color: inherit;
}
.site-header .search-form {
position: absolute;
right: 65px;
bottom: 150px;
width: 90px;
opacity: 0;
}
.site-header .search-form input.search-field {
width: 5em;
font-size: 1em;
border-width: 0;
padding: .4em .4em .4em 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
position: relative;
bottom: 5px;
}
.site-header .search-form .search-submit {
display: none;
}
.site-header .search-form.search-form--active {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
display: block;
top: 28px;
opacity: 1;
}

<a class="search-trigger"></a>
<?php get_search_form(); ?>
&#13;