Javascript/jQuery - Hide on click

Question

Я довольно новичок в JS, поэтому, пожалуйста, будьте нежны.

У меня есть набор вкладок, которые я делаю в аккордеоне, когда мобильный. Он отлично работает, но на мобильных устройствах я хотел бы закрыть «вкладки», когда я снова их нажму. Я попытался добавить .hide() при нажатии, но ничего не произошло. Что я делаю не так? Разметка выглядит примерно так:

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

JS выглядит примерно так:

// 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"); 

Я использовал код here и адаптировать его к моим потребностям и содержанию.

Answer 1

Если я правильно понимаю вашу проблему. Если вы хотите закрыть раздел «tab_content» onclick для мобильных устройств, просто добавьте функцию ниже.

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

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

    }); 

Answer 2

Вы можете проверить, активна ли вкладка щелчка, и если да, то верните ее после закрытия активных вкладок.

// 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"); 
}); 

Также имейте в виду, что мы обычно придают событие только onece, поэтому любой elementX.click не должно быть внутри функции, которую вы называете много раз.