0
に2回目のクリックの後に姿を消したこれは私のコードがどのように動作するかです:ホワイトアイコンはモバイル
- アイコンをクリックしたときにもう一度クリックし、ドロップダウンコンテンツは をフェードアウトしますと、ドロップダウンコンテンツは
- にフェードインします
私のコードはデスクトップでうまくいっていますが、モバイルに問題がある理由はわかりません。 2回目のクリック後にアイコンが消えました。
を消滅しましたあなたたちの一部いくつかの助言を私に提供することができます。ありがとう!
$(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>
は、モバイルデバイス上で何の 'がないことを心に留めておくの問題を引き起こしています。あなたは ':active'を使うことができますが、それは':hover'の後に使います。例 'a:ホバー、a:アクティブ{スタイル}'。多分これは問題を引き起こしている –
クール!なぜ私はそれについて考えないのですか? jqeuryに集中してください。私は何かが間違っていると思った。どうもありがとうございます! :) – Eelyn
うれしい私は助けることができました! :D私は答えとしてそれを投稿しますので、解決を探している他のユーザーはそれをより良く見るでしょう –