这就是我的代码的工作原理:
- 点击图标时,下拉内容会淡入
- 再次点击时,下拉内容会淡出
我的代码在桌面上运行良好,但不知道为什么在移动设备上出现问题。第二次点击后图标消失。
希望大家能给我一些建议。谢谢!
$(document).ready(function(){
$(".advanced_search a").click(function(){
$(".overlay_search").fadeToggle(200);
var $this = $(this);
if ($this.hasClass('advancedsearch_icon_active')) {
$(".advanced_search a").removeClass('advancedsearch_icon_active').addClass('advancedsearch_icon');
} else if ($this.hasClass('advancedsearch_icon')) {
$(".advanced_search a").removeClass('advancedsearch_icon').addClass('advancedsearch_icon_active');
} else {
$(".advanced_search a").addClass("advancedsearch_icon");
}
});
});
body{
background-color: #ccc;
}
.advancedsearch_icon{
background: url('https://image.ibb.co/fxUXFQ/filter.png') no-repeat right 0; width: 20px; height: 20px; padding-left: 20px;
}
.advancedsearch_icon:hover, .advancedsearch_icon_active{
background: url('https://image.ibb.co/kY4opk/filter_hover.png') no-repeat right 0; width: 20px; height: 20px; padding-left: 20px;
}
.overlay_search {
display:none;
position:absolute;
width:100%;
background:#eeeeee;
overflow:hidden;
z-index:3;
-webkit-box-shadow: 7px 7px 24px -8px rgba(18,17,12,0.5); -moz-box-shadow: 7px 7px 24px -8px rgba(0,0,0,0.5); box-shadow: 7px 7px 24px -8px rgba(18,17,12,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="advanced_search">
<a class="advancedsearch_icon" href="#"></a>
</div>
<div class="overlay_search">
content is here.
</div>
最佳答案
请记住,在移动设备上没有 :hover
事件。您可以使用 :active
但在 :hover
之后使用它。示例 a:hover, a:active { styles }
。也许这就是导致问题的原因
$(document).ready(function(){
$(".advanced_search a").click(function(){
$(".overlay_search").fadeToggle(200);
var $this = $(this);
if ($this.hasClass('advancedsearch_icon_active')) {
$(".advanced_search a").removeClass('advancedsearch_icon_active').addClass('advancedsearch_icon');
} else if ($this.hasClass('advancedsearch_icon')) {
$(".advanced_search a").removeClass('advancedsearch_icon').addClass('advancedsearch_icon_active');
} else {
$(".advanced_search a").addClass("advancedsearch_icon");
}
});
});
body{
background-color: #ccc;
}
.advancedsearch_icon{
background: url('https://image.ibb.co/fxUXFQ/filter.png') no-repeat right 0; width: 20px; height: 20px; padding-left: 20px;
}
.advancedsearch_icon:hover, .advancedsearch_icon_active,
.advancedsearch_icon:active
{
background: url('https://image.ibb.co/kY4opk/filter_hover.png') no-repeat right 0; width: 20px; height: 20px; padding-left: 20px;
}
.overlay_search {
display:none;
position:absolute;
width:100%;
background:#eeeeee;
overflow:hidden;
z-index:3;
-webkit-box-shadow: 7px 7px 24px -8px rgba(18,17,12,0.5); -moz-box-shadow: 7px 7px 24px -8px rgba(0,0,0,0.5); box-shadow: 7px 7px 24px -8px rgba(18,17,12,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="advanced_search">
<a class="advancedsearch_icon" href="#"></a>
</div>
<div class="overlay_search">
content is here.
</div>
关于javascript - 第二次点击手机后白色图标消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45369819/