2つのulにアコーディオンを使用

Question

現在、私はコンテンツを表示するために一緒に働く2 ulを持っています。 私はコードhere

の例を作成した。しかし、私が何をしたいのか、画面サイズは678px、その後小さいとき、この

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

のようなアコーディオン効果を使用しています。だからそれはちょっと変わったように見えるはずです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()を初期化します。