Question

我得到了这个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>

有人能看出问题所在吗？

Answer 1

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

Chrome Dev 控制台：https://developers.google.com/chrome-developer-tools/docs/console
FireBug：https://getfirebug.com/

这些工具肯定会帮助您调试Javascript错误。我的语法没有太大的错误。

Answer 2

我从淘汰赛论坛得到了这个，所以没有给我信任但是要点击......：

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

基本上zew只是在手风琴函数周围放置了超时功能，如下所示：

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

敲击导致手风琴功能失调

2 个答案: