白色图标消失在移动

问题描述：

当单击该图标，在下拉菜单中的内容将在淡出
当再次点击，下拉内容将淡出

我的代码在桌面上运行良好，但不知道为什么移动设备出现问题。第二次点击后，图标消失。

好看移动
单击并再次显示内容
点击关闭，但图标消失

希望你们中的一些人可以提供一些建议。谢谢！

$(document).ready(function(){ 
 
    $(".advanced_search a").click(function(){ 
 
     $(".overlay_search").fadeToggle(200); 
 
\t \t 
 
\t \t var $this = $(this); 
 
\t \t if ($this.hasClass('advancedsearch_icon_active')) { 
 
\t \t \t $(".advanced_search a").removeClass('advancedsearch_icon_active').addClass('advancedsearch_icon'); 
 
\t \t } else if ($this.hasClass('advancedsearch_icon')) { 
 
\t \t \t $(".advanced_search a").removeClass('advancedsearch_icon').addClass('advancedsearch_icon_active'); 
 
\t \t } else { 
 
\t \t \t $(".advanced_search a").addClass("advancedsearch_icon"); 
 
\t \t } 
 
    }); 
 
});

body{ 
 
    background-color: #ccc; 
 
} 
 
.advancedsearch_icon{ 
 
\t 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{ 
 
\t background: url('https://image.ibb.co/kY4opk/filter_hover.png') no-repeat right 0; width: 20px; height: 20px; padding-left: 20px; 
 
} 
 

 
.overlay_search { 
 
\t display:none; 
 
\t position:absolute; 
 
\t width:100%; 
 
\t background:#eeeeee; 
 
\t overflow:hidden; 
 
\t z-index:3; 
 
\t -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"> 
 
\t \t <a class="advancedsearch_icon" href="#"></a> 
 
</div> 
 
<div class="overlay_search"> 
 
    content is here. 
 
</div>

记住，在移动设备上没有'：hover'事件。你可以使用'：active'，但在''hover'之后使用它。例如'a：hover，a：active {styles}'。也许这是造成问题的原因 –

酷！为什么我从来没有想过这个。继续关注jqeury。以为我做错了什么。非常感谢！ :) – Eelyn

很高兴我能帮忙！：D我会张贴它作为答案，以便其他用户寻找解决方案将更好地看到它 –

答

请记住，在移动设备上没有:hover事件。您可以使用:active，但在:hover之后使用它。示例a:hover, a:active { styles }。也许这是造成问题

$(document).ready(function(){ 
 
    $(".advanced_search a").click(function(){ 
 
     $(".overlay_search").fadeToggle(200); 
 
\t \t 
 
\t \t var $this = $(this); 
 
\t \t if ($this.hasClass('advancedsearch_icon_active')) { 
 
\t \t \t $(".advanced_search a").removeClass('advancedsearch_icon_active').addClass('advancedsearch_icon'); 
 
\t \t } else if ($this.hasClass('advancedsearch_icon')) { 
 
\t \t \t $(".advanced_search a").removeClass('advancedsearch_icon').addClass('advancedsearch_icon_active'); 
 
\t \t } else { 
 
\t \t \t $(".advanced_search a").addClass("advancedsearch_icon"); 
 
\t \t } 
 
    }); 
 
});

body{ 
 
    background-color: #ccc; 
 
} 
 
.advancedsearch_icon{ 
 
\t 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 
 
{ 
 
\t background: url('https://image.ibb.co/kY4opk/filter_hover.png') no-repeat right 0; width: 20px; height: 20px; padding-left: 20px; 
 
} 
 

 
.overlay_search { 
 
\t display:none; 
 
\t position:absolute; 
 
\t width:100%; 
 
\t background:#eeeeee; 
 
\t overflow:hidden; 
 
\t z-index:3; 
 
\t -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"> 
 
\t \t <a class="advancedsearch_icon" href="#"></a> 
 
</div> 
 
<div class="overlay_search"> 
 
    content is here. 
 
</div>

白色图标消失在移动

相关推荐