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

回答

相关问题