在两个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()。