jQueryカスタムアコーディオン - 問題を閉じる現在開いているセクション

Question

私はJS Fiddleを提供しましたが、それはモバイル向けですので、ウィンドウの幅を狭くしたりコンソールを開いたりしても問題はありません。

デフォルトのタブとその内容を開き、別のタブをクリックして開き、下にスクロールします。これは問題ありませんが、前のタブは閉じていません。閉じるためにクリックすると、開いているすべてが閉じられ、使いやすさが完全ではありません。

私が考える問題の一部は、この関数内である：

var tabClick = function(x) { 

そして、私が間違って

フィドルやっているその私のいるisOpen条件だと思う：https://jsfiddle.net/6wttzcg5/5/

JS：については

$(document).ready(function() { 

var originalTabs = $('.originalTabs').html(); 
var windowWidth = 0; 
var time = 500; 

function clearTabs() { 
    $('.originalTabs').html(originalTabs); 
} 

//clearTabs(); 
//desktopTabs(); 

function desktopTabs() { 
    clearTabs(); 

    // cretate tabs for desktop 
    var headers = $("#tab_description h6"); 

    $('#tab_description h6').each(function(i) { 
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>'); 
    }); 

    for (var i = 0; i < headers.length; i++) { 
    $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>'); 
    } 

    $('ul.tabs').each(function() { 
    var active, content, links = $(this).find('a'); 
    var listitem = $(this).find('li'); 
    active = listitem.first().addClass('active'); 
    content = $(active.attr('href')); 
    $('.tab').hide(); 
    $(this).find('a').click(function(e) { 
     $('.tab').hide(); 
     $('ul.tabs li').removeClass('active'); 
     content.hide(); 
     active = $(this); 
     content = $($(this).attr('href')); 
     active.parent().addClass('active'); 
     content.show(); 
     return false; 
    }); 
    }); 

    headers.remove(); // remove headers from description 
    $('#tab-0').show(); // show the first tab 
} 

function mobileTabs() { 
    clearTabs(); 

    //alert("loaded mobile"); 

    var headers = $("#tab_description h6"); 

    $(headers).each(function(i) { 
    $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>'); 
    //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>'); 
    $(this).on('click tap', function() { 
     tabClick($(this)); 
    }); 
    }); 

    $('#tab_description h6').first().addClass("active"); 
    $('#tab_description h6').first().nextUntil("h6").show(); 
} 

var tabClick = function(x) { 

    //alert("clicked"); 
    var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div'); 

    $('#tab_description h6').removeClass("active"); 
    if (!$(x).hasClass("active")) { 
    $(x).addClass("active"); 
    } 

    // Check if current accordion item is open 
    var isOpen = $(x).next().is(":visible"); 

    //console.log(x); 
    // Open accordion item if previously closed 
    if (!isOpen) { 
    $(x).nextUntil('h6').slideDown(time); 
    $(x).nextUntil(accordionContent).slideDown(time); 
    } else { 
    accordionContent.slideUp(time); 
    } 

    scrollToTab($(x)); 

} 

function scrollToTab(tabScrollTo){ 
    $("html, body").animate({ scrollTop: $(tabScrollTo).offset().top - 15 }, time); 
} 

//load default 
$(window).on("load",function(){ 

    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
    //alert("Mobile/Tablet (Portrait)"); 
    desktopTabs(); 
    //$('#tab_description h6').on("click, tap", tabClick); 

    //console.log(originalTabs); 
    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
    //alert("Mobile/Tablet (Portrait)"); 
    mobileTabs(); 
    //$('#tab_description h6').on("click, tap", tabClick); 

    } else if (isDesktop) { 
    //alert("Desktop"); 
    desktopTabs(); 
    } 
}); 

//bind to resize 
$(window).on("orientationchange resize",function(){ 

    if(windowWidth != $(window).width()){ 

    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     desktopTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     mobileTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

    } else if (isDesktop) { 
     desktopTabs(); 
    } 

    windowWidth = $(window).width(); 
    delete windowWidth; 

    } 

}); 

}); 

Answer 1

を誰もが解決策をここで知りたいのですが：

フィドル：https://jsfiddle.net/6wttzcg5/12/の

JS：

$(document).ready(function() { 

    var originalTabs = $('.originalTabs').html(); 
    var windowWidth = 0; 
    var swapSpeed = 300; 
    var scrollSpeed = 200; 

    function clearTabs() { 
    $('.originalTabs').html(originalTabs); 
    } 

    //clearTabs(); 
    //desktopTabs(); 

    function desktopTabs() { 
    clearTabs(); 

    // cretate tabs for desktop 
    var headers = $("#tab_description h6"); 

    $('#tab_description h6').each(function(i) { 
     $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>'); 
    }); 

    for (var i = 0; i < headers.length; i++) { 
     $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>'); 
    } 

    $('ul.tabs').each(function() { 
     var active, content, links = $(this).find('a'); 
     var listitem = $(this).find('li'); 
     active = listitem.first().addClass('active'); 
     content = $(active.attr('href')); 
     $('.tab').hide(); 
     $(this).find('a').click(function(e) { 
     $('.tab').hide(); 
     $('ul.tabs li').removeClass('active'); 
     content.hide(); 
     active = $(this); 
     content = $($(this).attr('href')); 
     active.parent().addClass('active'); 
     content.show(); 
     return false; 
     }); 
    }); 

    headers.remove(); // remove headers from description 
    $('#tab-0').show(); // show the first tab 
    } 

    function mobileTabs() { 
    clearTabs(); 

    //alert("loaded mobile"); 

    var headers = $("#tab_description h6"); 

    $(headers).each(function(i) { 
     $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>'); 
     //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>'); 
     $(this).on('click tap', function() { 
     tabClick($(this)); 
     }); 
    }); 

    $('#tab_description h6').first().addClass("active"); 
    $('#tab_description h6').first().nextUntil("h6").show(); 
    } 

    var tabClick = function(x) { 

    //alert("clicked"); 
    var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div'); 

    //$('#tab_description h6').removeClass("active"); 
    if (!$(x).hasClass("active")) { 
     $(x).addClass("active"); 
    } 

    // Check if current accordion item is open 
    var isOpen = $(x).hasClass("active"); 

    //console.log(x); 
    // Open accordion item if previously closed 

    if (isOpen) { 
     $('#tab_description h6').removeClass("active"); 
     $(accordionContent).slideUp(swapSpeed); 
     $(x).addClass("active"); 
     $(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() { 
     scrollToTab($(x)); 
     }); 
    } 

    return false; 

    } 

    function scrollToTab(x) { 
    $("html, body").animate({ 
     scrollTop: $(x).offset().top - 10 
    }, scrollSpeed); 
    } 

    //load default 
    $(window).on("load", function() { 

    /*if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     //alert("Mobile/Tablet (Portrait)"); 
     desktopTabs(); 
     //$('#tab_description h6').on("click, tap", tabClick); 

     //console.log(originalTabs); 
    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     //alert("Mobile/Tablet (Portrait)"); 
     mobileTabs(); 
     //$('#tab_description h6').on("click, tap", tabClick); 

    } else if (isDesktop) { 
     //alert("Desktop"); 
     desktopTabs(); 
    } */ 
    mobileTabs(); 
    }); 

    //bind to resize 
    $(window).on("orientationchange resize", function() { 

    if (windowWidth != $(window).width()) { 

     /*if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     desktopTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

     } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     mobileTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

     } else if (isDesktop) { 
     desktopTabs(); 
     } */ 

      mobileTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

     windowWidth = $(window).width(); 
     delete windowWidth; 

    } 

    }); 

});