Javascript/jQuery - Ausblenden auf Klick

Question

Ich bin ziemlich neu in JS, also bitte sei sanft.

Ich habe eine Reihe von Tabs, die ich in ein Akkordeon mache, wenn mobil. Es funktioniert großartig, aber im Mobilgerät möchte ich die "Tabs" schließen, wenn ich sie erneut anklicke. Ich habe versucht, ein hinzuzufügen, aber es ist nichts passiert. Was mache ich falsch? Das Markup sieht ungefähr so ​​aus:

<ul class="tabs"> 
    <li class="active" rel="tab1">Tab 1</li> 
    <li rel="tab2">Tab 2</li> 
    <li rel="tab3">Tab 3</li> 
    <li rel="tab4">Tab 4</li> 
</ul> 

<div class="tab_container"> 
    <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3> 
    <div id="tab1" class="tab_content"> 
     <h2>Tab 1 content</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p> 
    </div> 
    <!-- #tab1 --> 

    <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3> 
    <div id="tab2" class="tab_content"> 
     <h2>Tab 2 content</h2> 
     <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p> 
    </div> 
    <!-- #tab2 --> 

    <h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3> 
    <div id="tab3" class="tab_content"> 
     <h2>Tab 3 content</h2> 
     <p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p> 
    </div> 
    <!-- #tab3 --> 

    <h3 class="tab_drawer_heading" rel="tab4">Tab 4</h3> 
    <div id="tab4" class="tab_content"> 
     <h2>Tab 4 content</h2> 
     <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p> 
    </div> 
    <!-- #tab4 --> 

</div> 
<!-- .tab_container --> 

Die JS sieht ungefähr wie folgt aus:

// tabbed content 
$(".tab_content").hide(); 
$(".tab_content:first").show(); 

    /* if in tab mode */ 
$("ul.tabs li").click(function() { 

    $(".tab_content").hide(); 
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn();   

    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 

    $(".tab_drawer_heading").removeClass("d_active"); 
    $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active"); 

}); 
/* if in drawer mode */ 
$(".tab_drawer_heading").click(function() { 

    $(".tab_content").hide(); 
    var d_activeTab = $(this).attr("rel"); 
    $("#"+d_activeTab).fadeIn();       
    $(".tab_drawer_heading").removeClass("d_active"); 
    $(this).addClass("d_active"); 

    $("ul.tabs li").removeClass("active"); 
    $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active"); 

if(".tab_drawer_heading".hasClass('d_active')){ */This is what I tried to make it hide*/ 
    $(".tab_drawer_heading").click(function() { 
    $("this.tab_content").hide(); 
})}; 
}); 


/* Extra class "tab_last" 
    to add border to right side 
    of last tab */ 
$('ul.tabs li').last().addClass("tab_last"); 

habe ich den Code here und angepasst es auf meine Bedürfnisse und Inhalt.

Answer 1

Wenn ich dein Problem richtig verstehe. Wenn Sie den Abschnitt "tab_content" bei einem Klick für mobile Geräte schließen möchten, fügen Sie einfach die folgende Funktion hinzu.

$(".tab_content").click(function() { 

     if ($(window).width() <= 700){ 
     // do something for mobile devices 
     $(this).hide(); 
    } 

    }); 

Answer 2

Sie überprüfen können, ob die angeklickt Registerkarte die aktiven Registerkarte sind und wenn ja Rückkehr, nachdem Sie die aktiv Tabs schließen.

// Lets detect if it is a phone, you can use your code here 
var isMobile = false; 
/* From http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery */ 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
    isMobile = true; 
} 


// Lets fix your code here 
/* if in drawer mode */ 
$(".tab_drawer_heading").click(function() { 

    $(".tab_content").hide(); 
    var d_activeTab = $(this).attr("rel"); 

    // If `this` is active 
    if(isMobile && $("ul.tabs li[rel^='"+d_activeTab+"']").hasClass("active")){ 
     $(".tab_drawer_heading").removeClass("d_active"); 
     $("ul.tabs li").removeClass("active"); 
     return; 
    } 

    $("#"+d_activeTab).fadeIn();       
    $(".tab_drawer_heading").removeClass("d_active"); 
    $(this).addClass("d_active"); 

    $("ul.tabs li").removeClass("active"); 
    $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active"); 
}); 

Denken Sie auch daran, dass wir in der Regel ein Ereignis anhängen nur onece, so in einer Funktion, die Sie jede elementX.click sollte nicht oft nennen sein.