JQuery Mobile可摺疊不適用於div

我對JQuery和Javascript都很陌生。我有一個Feed，我想將這些Feed顯示在一個可摺疊的div裏面作爲一個可摺疊的div。我有以下的JavaScript文件：JQuery Mobile可摺疊不適用於div

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("feeds", "1"); 
    google.setOnLoadCallback(showFeed); 

    function showFeed() { 
     var feed = new google.feeds.Feed("http://www.varzesh3.com/rss"); 
     feed.setNumEntries(10); 
     feed.load(function(result) { 
     if (!result.error) { 
      var container = document.getElementById("headlines"); 
      for (var i = 0; i < result.feed.entries.length; i++) { 
      var entry = result.feed.entries[i]; 
      var di = document.createElement("div").setAttributeNode("data-role", "collapsible"); 
      di.innerHTML = '<h3>' + entry.title + '</h3>'; 
      di.innerHTML += '<p>' + entry.contentSnippet + '</p>'; 
      container.appendChild(di); 
      } 
     } else { 
      var container = document.getElementById("headlines"); 
      container.innerHTML = '<li>Get your geek news fix at site</li>'; 
     } 
     }); 
    } 
</script> 

<body> 
    <div data-role="collapsible-set" id="headlines"></div> 
</body>

這應該去找我所有的飼料名字，並把他們在一個可摺疊的DIV，它正是這麼做的，但它顯示的名稱爲純HTML文本，而不是一個jQuery Mobile的可摺疊格。

來源

2013-01-06 AML

@AML，這更像是一個評論而不是答案，因爲不會分析你的整個代碼，但我會把它放在這裏進行格式化。

在行：

var di = document.createElement("div").setAttributeNode("data-role", "collapsible");

你不採取一個指針（DI）爲新創建的元素，你把使用setAttributeNode（...）的結果，你需要拆分代碼在兩行這樣的：

var di = document.createElement("div"); 
di.setAttribute("data-role", "collapsible");

有與使用setAttributeNode一個問題實際上是的setAttribute。現在正在工作，看到http://pannonicaquartet.com/test/feeds.html

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
<style type="text/css"> 
    .collapsible{ 
     display : none; 
    } 
    h3{ 
     background-color : lightgray; 
    } 
</style> 
    <script src="https://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("feeds", "1"); 

    function showFeed() { 
     var feed = new google.feeds.Feed("http://www.varzesh3.com/rss"); 
     feed.load(function(result) { 
     if (!result.error) { 
      var container = document.getElementById("headlines"); 
      for (var i = 0; i < result.feed.entries.length; i++) { 
      var entry = result.feed.entries[i]; 
      var div = document.createElement("div"); 
      div.onclick = function(evt){ 
       var elP = this.children[1]; 
       if(elP.style.display == 'inline'){ 
        elP.style.display = 'none'; 
       }else{ 
        elP.style.display = 'inline'; 
       } 
      }; 
      div.innerHTML = '<h3>' + entry.title + '</h3>'; 
      div.innerHTML += '<p class="collapsible">' + entry.contentSnippet + '</p>'; 
      container.appendChild(div); 
      } 
     } 
     }); 
    } 

    google.setOnLoadCallback(showFeed); 

</script>

來源

2013-01-06 14:48:43 HMarioD

THX @HMarioD，但不工作 – AML

@AML，我糾正線我和嘗試，並正在工作。我用完整的代碼和生動的鏈接編輯答案。 – HMarioD

我想創建一個可摺疊的內容塊，http://jquerymobile.com/test/docs/content/content-collapsible.html – AML

JQuery Mobile可摺疊不適用於div

回答

相關問題