2017-07-28 1 views
0

に2回目のクリックの後に姿を消したこれは私のコードがどのように動作するかです:ホワイトアイコンはモバイル

  1. アイコンをクリックしたときにもう一度クリックし、ドロップダウンコンテンツは
  2. をフェードアウトしますと、ドロップダウンコンテンツは
  3. にフェードインします

私のコードはデスクトップでうまくいっていますが、モバイルに問題がある理由はわかりません。 2回目のクリック後にアイコンが消えました。

  1. enter image description here

  2. モバイル に良い見てクリックして、コンテンツ enter image description here

  3. もう一度クリックし閉じますを示しているが、アイコンがあることを期待して enter image description here

を消滅しましたあなたたちの一部いくつかの助言を私に提供することができます。ありがとう!

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

+1

は、モバイルデバイス上で何の 'がないことを心に留めておくの問題を引き起こしています。あなたは ':active'を使うことができますが、それは':hover'の後に使います。例 'a:ホバー、a:アクティブ{スタイル}'。多分これは問題を引き起こしている –

+0

クール!なぜ私はそれについて考えないのですか? jqeuryに集中してください。私は何かが間違っていると思った。どうもありがとうございます! :) – Eelyn

+0

うれしい私は助けることができました! :D私は答えとしてそれを投稿しますので、解決を探している他のユーザーはそれをより良く見るでしょう –

答えて

1

モバイルデバイス上で何:hoverイベントが存在しないことに注意してください。 :activeを使用できますが、AFTER :hoverの後に使用してください。例a:hover, a:active { styles }。 hover`イベント:多分これは

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