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()。

在两个ul

1 个答案: