-1

这似乎不起作用：

    <script>
    window.onload = function()   
    {    
        var div = '<div id="accordion">';
        div += '<div>';
          div += '<h3>section1</h3>';
          div += '<p>text 1</p>';
          div += '</div>';
        div += '<div>';
          div += '<h3>section2</h3>';
          div += '<p>text 2</p>';
        div += '</div>';
        div += '</div>';

        document.getElementById("list").innerHTML = div;
    }
    </script>

带有指向 jquery 库的链接的其余 html 被排除在此代码之外

4

4 回答 4

3

如果你想使用 jqueryui 手风琴，你的 html 代码是错误的，根据 jqueryUi doc，你必须试试这个：

function initAccordion (){
    $(function() { 
        $( "#accordion" ).accordion({ heightStyle: "content" }); 
    });
}

window.onload = function()   
{    
    var div = '<div id="accordion">';
    div += '<h3>section1</h3><div>';
    div += '<p>text 1</p>';
    div += '</div>';
    div += '<h3>section2</h3><div>';
    div += '<p>text 2</p>';
    div += '</div>';
    div += '</div>';

    document.getElementById("list").innerHTML = div;
    //init jquery accordion
    initAccordion();    
 }

看这个例子

于 2013-04-12T21:00:04.913 回答
0

如果我没看错的话，有一个 ID 为手风琴的 div，其中包含两个 div。这两个 div 中的每一个都有一个标题标签和一个段落标签。两个标题标签和两个段落标签都包含副本。

我想不出一种非常简洁的方法来做到这一点，因为很多元素都是在动态创建的。我确实认为使用 createElement() 创建所有非 DOM 的东西，使用 appendChild() 对其进行安排，然后通过文档片段将它们全部加载是一种很好的方法，因为从性能的角度来看它明显更好。Paul Irish 在这里详细介绍了这一切。

  $(function(){
    // on the page already...just targeting it with a variable
    var onPageEl = document.getElementById('list');

    // created off-DOM...we'll load our stuff here before loading it onto the page
    var frag = document.createDocumentFragment();

    // create elements
    var accordion = document.createElement('div');
    var div1 = document.createElement('div');
    var header1 = document.createElement('h3');
    var somePara1 = document.createElement('p');
    var div2 = document.createElement('div');
    var header2 = document.createElement('h3');
    var somePara2 = document.createElement('p');

    // use jQuery to give our containing element an ID of 'accordion'
    $(accordion).attr('id', 'accordion');

    // arrange the first bulk of div code
    accordion.appendChild(div1);
    div1.appendChild(header1);
    div1.appendChild(somePara1);
    header1.innerHTML = "section1";
    somePara1.innerHTML = "text1";

    // arrange the second bulk of div code
    accordion.appendChild(div2);
    div2.appendChild(header2);
    div2.appendChild(somePara2);
    header2.innerHTML = "section2";
    somePara2.innerHTML = "text2";

    // Load both bulks of content into the document fragment
    frag.appendChild(div1);
    frag.appendChild(div2);

    // Load the document fragment onto 'list' which is already on the page
    onPageEl.appendChild(frag);
  });

由于有些东西被创建了两次，所以可以使用一个函数来创建东西，但这可能会产生性能问题。

只是我的 0.02 美元...

于 2013-04-12T21:12:40.197 回答
0

如果你想要做的是对新内容做某种动画，你可以这样做：

<script>
window.onload = function()   
{    
    var div = '<div id="accordion" style="display: none;">';
    div += '<div>';
      div += '<h3>section1</h3>';
      div += '<p>text 1</p>';
      div += '</div>';
    div += '<div>';
      div += '<h3>section2</h3>';
      div += '<p>text 2</p>';
    div += '</div>';
    div += '</div>';

    document.getElementById("list").innerHTML = div;
    $("#accordion").fadeIn(2000);
}
</script>
于 2013-04-12T20:42:00.473 回答
0

转换这个：

window.onload = function()   
{    
    var div = '<div id="accordion">';
    div += '<div>';
      div += '<h3>section1</h3>';
      div += '<p>text 1</p>';
      div += '</div>';
    div += '<div>';
      div += '<h3>section2</h3>';
      div += '<p>text 2</p>';
    div += '</div>';
    div += '</div>';

    document.getElementById("list").innerHTML = div;
}

进入这个：

$(window).on('load',function(){
    var div = '<div id="accordion">';
        div += '<div>';
        div += '<h3>section1</h3>';
        div += '<p>text 1</p>';
        div += '</div>';
        div += '<div>';
        div += '<h3>section2</h3>';
        div += '<p>text 2</p>';
        div += '</div>';
        div += '</div>';

    $('#list')
            .html(div)
            .promise()
            .done(function(){    
                $('#accordion').animate({opacity:0.2},1000);
            });
});

或者你想做的任何动画。基本上为对象创建一个服务员，.promise()直到所有操作都完成并.done(function(){})为其附加一个成功的回调。非常漂亮，您现在可以对任何元素执行此操作。

.promise() 信息在这里，.done() 信息在这里

作为旁注，你真的应该考虑你正在做的附加。这可以在 HTML 中，设置为display:none，然后根据特定的内容在加载时显示吗？只是需要考虑的事情。

编辑：新方法，在这里用基本动画测试。作品。

于 2013-04-12T20:43:29.757 回答