Javascript JQuery Mobile可折叠文件不适用于div_Javascript_Jquery

Javascript JQuery Mobile可折叠文件不适用于div

javascript jquery

Javascript JQuery Mobile可折叠文件不适用于div,javascript,jquery,Javascript,Jquery,我对JQuery和Javascript都是新手。我有一个提要，我想在可折叠div中显示这些提要作为可折叠div。我有以下Javascript文件： <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); google.setOnLo

我对JQuery和Javascript都是新手。我有一个提要，我想在可折叠div中显示这些提要作为可折叠div。我有以下Javascript文件：

<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>


加载（“提要”，“1”）；
setOnLoadCallback（showFeed）；
函数showFeed（）{
var feed=新的google.feed.feed（“http://www.varzesh3.com/rss");
饲料.饲料（10）；
feed.load（函数（结果）{
如果（！result.error）{
var container=document.getElementById（“标题”）；
对于（变量i=0；i'；
子容器（di）；
}
}否则{
var container=document.getElementById（“标题”）；
container.innerHTML='在站点上获取你的极客新闻补丁'；
}
});
}

这应该获取我所有的提要名称并将它们放在一个可折叠的div中，它确实这样做了，但它将名称显示为纯HTML文本，而不是JQuery Mobile可折叠div。

@AML，这与其说是一个答案，不如说是一个注释，因为a不会分析您的整个代码，但出于格式化的目的，我将把它们放在这里

行中：

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

您不需要指向新创建元素的指针（di），而是获取setAttributeNode（…）的结果，您需要将代码分成两行，如下所示：

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

setAttributeNode实际上是setAttribute存在问题。现在正在工作，请参见


无标题文件
.可折叠{
显示：无；
}
h3{
背景颜色：浅灰色；
}
加载（“提要”，“1”）；
函数showFeed（）{
var feed=新的google.feed.feed（“http://www.varzesh3.com/rss");
feed.load（函数（结果）{
如果（！result.error）{
var container=document.getElementById（“标题”）；
对于（变量i=0；i'；
子容器（div）；
}
}
});
}
setOnLoadCallback（showFeed）；

@AML，我更正了行，然后尝试工作。我用完整的代码和一个动态链接编辑答案。我想创建一个可折叠的内容块，好的，我正在编辑答案和测试页面，看一下，当你点击它时文本折叠/取消折叠。这就是你想要的吗？不，这不是我想要的，我想要附加的动态可折叠集，谢谢HMarioD

<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>