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

时间:2017-07-28 09:29:53

标签: javascript jquery html toggle

这是我的代码的工作方式:

  1. 点击图标后,下拉内容将淡入
  2. 再次点击时,下拉内容将淡出
  3. 我的代码在桌面上运行良好,但不知道移动设备出现问题的原因。第二次点击后图标消失了。

    1. 在手机上看起来不错 enter image description here

    2. 点击并显示内容 enter image description here

    3. 再次单击关闭,但图标消失 enter image description here

    4. 希望你们中的一些人可以给我一些建议。谢谢!

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

1 个答案:

答案 0 :(得分:1)

请注意,在移动设备上没有:hover事件。您可以使用:active,但在:hover之后使用它。示例a:hover, a:active { styles }。也许这导致了问题

&#13;
&#13;
$(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");
		}
    });
});
&#13;
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);
}
&#13;
<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>
&#13;
&#13;
&#13;