Wenn 'dieser Fall' und 'dieser Fall' etwas anderes tun 'anderes etwas'

Question

Ich versuche eine onClick-Funktion zu erstellen, die nur unter einer Auflösung von 768px funktioniert. Die Funktion funktioniert bei anderen Auflösungen wie 992px und höher, aber aus irgendeinem Grund funktioniert die Funktion immer noch bei Auflösung 768px selbst.

folgende ist mein Code:

$(document).on('click','.active-tab', function(e){ 
 
    if ($(window).width() < 768) { 
 
    if($(this).hasClass('active')) { 
 
     $(this).removeClass("active"); 
 
     $(this).siblings().slideUp("fast"); 
 
    } else { 
 
     $(this).addClass('active'); 
 
     $(this).parent().find('li').slideDown("fast"); 
 
    } 
 
    } 
 
    e.preventDefault(); 
 
});

.active-tabs { 
 
    ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    list-style: none; 
 
    li { 
 
     display: none; 
 
    } 
 
    li:first-child { 
 
     display: block; 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="tabs"> 
 
    <ul> 
 
    <li class="active-tab"><a href="">ALL</a></li> 
 
    <li><a href="">TAB ONE</a></li> 
 
    <li><a href="">TAB TWO</a></li> 
 
    <li><a href="">TAB THREE</a></li> 
 
    <li><a href="">TAB FOUR</a></li> 
 
    </ul> 
 
</div>

Ich versuche, so etwas zu erreichen:

for when resolution is above 768

for when resolution is below 768

the onClick function whenever below 768

Ist es die Syntax, in der ich mich irre? oder vielleicht vergesse ich etwas? Schätzen Sie die Hilfe Jungs, danke.

Answer 1

Ihr Hauptproblem in Ihrem Beitrag scheint unbegründet zu sein, aber ich habe bemerkt, dass es einige Logikfehler gab, die dazu führen würden, dass der erste Klick nicht richtig funktioniert. Wenn Sie eine Referenz benötigen, um zu beweisen, dass Ihr Scheck funktioniert, click here (weil Sie die Größe eines SO-Snippets nicht ändern können).

Eine andere Art und Weise eine ähnliche Wirkung erzielen

ich zuerst die Anker-Tag Befestigung empfehlen würde. Sie könnten hinzufügen javascript:void(0) hinein oder einfach # setzen.

<li class="active-tab"><a href="javascript:void(0);">ALL</a></li> 

Wenn Sie diesen Code nur verwenden Sichtbarkeit

jedoch zu wechseln, gibt es einen Weg, um Ihren Code weiter zu vereinfachen. Sie können toggle verwenden um eine Ihrer wenn Strukturen zu erhalten:

$(document).on('click','.active-tab', function(e){ 
    if ($(window).width() < 768) { 
    $(this).siblings().toggle("fast"); 
    } 
    e.preventDefault(); 
}); 

Wenn Sie mehr Optionen benötigen

Hier ist eine Version des Codes, die toggleClass verwendet.

if ($(this).hasClass('active')) { 
    $(this).siblings().slideUp("fast"); 
} else { 
    $(this).siblings().slideDown("fast"); 
} 
$(this).toggleClass('active'); 

Answer 2

Bitte verwenden Sie diesen Code

HTML

<div class="tabs"> 
    <ul> 
    <li><a class="active-tab" href="">ALL</a></li> 
    <li><a href="">TAB ONE</a></li> 
    <li><a href="">TAB TWO</a></li> 
    <li><a href="">TAB THREE</a></li> 
    <li><a href="">TAB FOUR</a></li> 
    </ul> 
</div> 

css

.tabs li{ 
     display:inline-block; 
     vertical-align:top; 
    } 
    .tabs li a.active-tab{ 
     color:red; 
    } 

    @media screen and (max-width: 767px) { 
     .tabs li{ 
      display:block; 
     } 
     .tabs li:not(:first-child){ 
      display:none; 
     } 
    } 

jQuery

$('.tabs').on('click','a', function(e){ 
    if ($(window).width() < 768) {  
    $(this).parent('li').siblings().slideToggle("fast"); 
    } else {  
    $('.tabs a').removeClass('active-tab'); 
    $(this).addClass('active-tab'); 
    } 
    e.preventDefault(); 
}); 


$(window).on('load resize', function() { 
    $('.tabs li').removeAttr('style');  
});