0

我得到了这个 jquery 手风琴代码：

 $(function () {
    var icons = {
        header: "ui-icon-circle-arrow-e",
        activeHeader: "ui-icon-circle-arrow-s"
    };
    $("#accordion")
      .accordion({
          header: "> div > h3",
          collapsible: true,
          active: false,
          heightStyle: "content",
          icons: icons
      })
      .sortable({
          axis: "y",
          handle: "h3",
          stop: function (event, ui) {
              var items = [];
              ui.item.siblings().andSelf().each(function () {
                  //compare data('index') and the real index
                  if ($(this).data('index') != $(this).index()) {
                      items.push(this.id);
                  }
              });
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children("h3").triggerHandler("focusout");
              ui.item.parent().trigger('stop');
          }
      })
    .on('stop', function () {
        $(this).siblings().andSelf().each(function (i) {
            //kjører for alle "childs" i accordian...
            $(this).data('index', i);
        });
    })
    .trigger('stop');
});

这适用于静态 HTML，如下所示：

<div id="accordion">
    <div id ="Scene 1" class="group">
        <h3><b>#1: Task no 1</b></h3>
        <div>
             <textarea > Description of first task </textarea>
        </div>
    <div id ="Scene 2" class="group">
        <h3><b>#2: Task no 2/b></h3>
        <div>
            <textarea> Decription of task</textarea>
        </div>
    </div>
</div>

但是在通过敲除使 HTML 动态化后，单击标题时手风琴不再展开（或折叠）。

这是淘汰赛/动态 HTML：

<div id="accordion" data-bind="foreach: Tasks">
    <div data-bind="attr : {'id': 'Task' + TaskId}" class="group">
        <h3><b>#<span data-bind="text: TaskId"></span>: <span data-bind="text: Taskname"></span></b></h3>
        <div>
             <textarea data-bind="value: Description"></textarea>  
        </div>
    </div>
</div>

谁能看出问题出在哪里？

4

2 回答 2

1

您在浏览器开发控制台中是否遇到任何错误？所以在 Chrome 中，你需要按 F12（我认为），或者如果你像我一样使用 Firefox，安装 FireBug 然后在网页上按 F12。

这些工具肯定会帮助您调试 Javascript 错误。我看不出你的语法有什么问题。

于 2013-09-09T09:51:19.917 回答
0

我从淘汰赛论坛上得到了这个，所以我没有学分，但要 zew...：

他写道：“如果它与渲染有关，那么使用 setTimeout 进行简单测试应该会有所帮助......我已经编辑了你的小提琴 http://jsfiddle.net/k5gfA/5/ ”

基本上 zew 只是将 timeoutfunction 放在手风琴函数周围，如下所示：

 $(function () {

 setTimeout( function() {
    $("#accordion")
      .accordion({
          header: "> div > h3"
          ,collapsible: true
          ,active: false
          ,heightStyle: "content"
      })
      .sortable({
          axis: "y",
          handle: "h3",
          stop: function (event, ui) {
              var items = [];
              ui.item.siblings().andSelf().each(function () {
                  //compare data('index') and the real index
                  if ($(this).data('index') != $(this).index()) {
                      items.push(this.id);
                  }
              });
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children("h3").triggerHandler("focusout");
              // Now, print out the order of the accordion...
              if (items.length) $("#sekvens").text(items.join(','));
              ui.item.parent().trigger('stop');
          }
      })
      .on('stop', function () {
        $(this).siblings().andSelf().each(function (i) {
            $(this).data('index', i);
        });
     })
     .trigger('stop');
 }, 1000);
});

setTimeout 实际上解决了这个问题。一定是由于 DNN 以某种方式延迟了渲染（？？）无论如何，jsfiddle 中的代码修复了 DNN 中的问题。（注意：我已将 DNN 升级到版本 7.1.1。它运行 jQuery-1.9.1 和 jQuery-UI-1.10.3）

谢谢各位的帮助！！！！:D

于 2013-09-11T08:53:52.873 回答