Javascript/jQuery - クリックして非表示にする

Question

私はかなり新しいJSですので、優しくしてください。

モバイル時にアコーディオンにしているタブがあります。それは素晴らしいですが、モバイルでは、再びタップするときに「タブ」を閉じたいと思います。クリックしたときに.hide()を追加しようとしましたが、何も起こりませんでした。私は間違って何をしていますか？マークアップは次のようになります。

// 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を使用し、私のニーズやコンテンツへの適応：

は

<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は次のようになります。

Answer 1

私はあなたの問題を正しく理解しています。モバイルデバイスの[tab_content]セクションを閉じるには、以下の機能を追加するだけです。

$(".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は、あなたが何度も呼び出す関数内であってはならない心に留めておきます。