第二次点击手机后白色图标消失

Question

我的代码是这样工作的：

当点击图标时，下拉内容会淡入
再次点击时，下拉内容会淡出

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

在手机上看起来不错
点击显示内容
再次点击关闭，图标消失

希望你们中的一些人能给我一些建议。谢谢！

$(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>

Answer 1

请记住，在移动设备上没有 :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>

第二次点击手机后白色图标消失

White icon disappeared after second click on mobile

html

javascript

jquery

toggle