0
Dies ist, wie mein Code funktioniert:Weißes Symbol verschwand nach zweitem Klick auf mobilen
- wenn das Symbol klicken, wird der Drop-Down-Inhalt in
- verblasst, wenn Klick wieder, der Drop-Down-Inhalt verblasst aus
Mein Code funktioniert gut auf dem Desktop, aber ich weiß nicht, warum es ein Problem auf dem Handy gibt. Das Symbol verschwand nach dem zweiten Klick.
Schauen Sie gut auf mobilen
Click und zeigt den Inhalt
Klicken Sie erneut nahe an, aber das Symbol verschwunden
der Hoffnung, dass einige von euch könnte mir einen Rat geben. Vielen Dank!
$(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>
bedenken, dass auf mobilen Geräten gibt es keine ': hover' Ereignis. Sie können ': active' verwenden, aber verwenden Sie es nachher': hover'. Beispiel 'a: hover, a: active {styles}'. Vielleicht verursacht dies das Problem –
Cool! Warum ich nie darüber nachdenke. Konzentriere dich weiterhin auf jqeury. Dachte, ich mache etwas falsch. Ich danke dir sehr! :) – Eelyn
Ich bin froh, dass ich helfen konnte! : D Ich poste es als eine Antwort, so dass andere Benutzer, die nach einer Lösung suchen, es besser sehen werden –