在兩個ul上使用手風琴

Question

目前我有2個ul一起工作來顯示內容。 我創建的代碼here

的例子不過是我想要做的就是使用這樣

function checkWidth(){ 
     var windowsize = $window.width(); 
     if(windowsize < 769){ 
      $(function() { 
       $("#accordion").accordion({ 
        collapsible: true 
       }); 
      }); 
     } 
    } 

的摺疊效果，當屏幕尺寸較小然後678px。所以它應該看起來像那樣here

但是我不知道如何用我目前設置它的方式實現這一點。

而且我無法改變它的設置方式，因爲它已經被廣泛應用。

我希望有人能夠幫助我！

Answer 1

如果我閱讀這個權利，我認爲你建議你不能改變現有的HTML，你只能影響腳本。如果是這種情況，你可以簡單地隱藏你不需要的元素。

下面是一些可能爲你工作：

https://jsfiddle.net/Twisty/aqmejg16/

jQuery的

jQuery(function() { 
    var narrow = jQuery(window).width() < 678; 
    if (narrow) { 
    console.log("Narrow Window Found."); 
    jQuery("#tabs").hide(); 
    jQuery("#tab").hide(); 
    var acc = jQuery("<div>", { 
     id: "accord-1" 
    }); 
    jQuery("#tabs li").each(function(key, elem) { 
     acc.append("<h3>" + jQuery(elem).text() + "</h3>"); 
     acc.append("<div><p>" + jQuery("#tab li:eq(" + key + ")").html() + "</p></div>"); 
    }); 
    jQuery("#tabs").before(acc); 
    acc.accordion({ 
     collapsible: true 
    }); 
    } else { 
    jQuery("ul#tabs li").click(function(e) { 
     if (!jQuery(this).hasClass("active")) { 
     var tabNum = jQuery(this).index(); 
     var nthChild = tabNum + 1; 
     jQuery("ul#tabs li.active").removeClass("active"); 
     jQuery(this).addClass("active"); 
     jQuery("ul#tab li.active").removeClass("active"); 
     jQuery("ul#tab li:nth-child(" + nthChild + ")").addClass("active"); 
     } 
    }); 
    } 
}); 

要注意，你原來的小提琴沒有包含了jQuery UI樣式表，所以我補充說， 。接下來我還添加了jQuery(function() { });以確保代碼在頁面準備就緒後運行。

首先我們檢查窗口的寬度。我們可以有條件地隱藏內容並重新繪製我們想要的內容。由於內容仍然適用，我決定不刪除或替換它們。

創建包含div並迭代每個選項卡元素以製作標題和選項卡內容以製作每個選項的內容。將所有元素附加到文檔中，然後在其上初始化accordian()。