Question

我的asp.net mvc4视图中有一个jquery ui手风琴。我遵循了这里解释的内容：

我得到了下面奇怪的行为（见下面链接中的图片）

你可以看到我有两个标题标题，过滤和添加组件。奇怪的行为是例如在Filter的情况下，内容是在标题“Filter”中绘制的，为什么？ “添加组件”标题也是如此。

HTML代码（以下是jQuery ui标签内）：

<style>
     /* IE has layout issues when sorting (see #5413) */
     .group { zoom: 1 }
</style>

      (...)

<div id="accordion1" style= "width: 790px;">
   <div class="group">
      <h3>Filters</h3>  
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
   <div class="group">
      <h3>Add component</h3>
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
 </div> <!-- end accordion -->

 <div id="accordion2" style= "width: 790px;">
   <div class="group">
      <h3>Filters</h3>  
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
   <div class="group">
      <h3>Add others</h3>
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
 </div> <!-- end accordion -->

在我的脚本部分，我有以下内容：

    $(function () {
        function subscribe_accordion_to_hoverintent_event(accordionId) {
            $(accordionId).accordion({
                event: "click hoverintent"
            });
        }

        subscribe_accordion_to_hoverintent_event("#accordion1");
        subscribe_accordion_to_hoverintent_event("#accordion2");
    });

    // Collapse content
    $(function () {
        function set_accordion_as_collapsible(accordionId) {
            $(accordionId).accordion({
                collapsible: true
            });
        }

        set_accordion_as_collapsible("#accordion1");
        set_accordion_as_collapsible("#accordion2");
    });

    // Sortable functionality
    $(function () {
        function set_accordion_as_sortable(accordionId) {
            $(accordionId).accordion({
                header: "> div > h3"
            }).sortable({
                  axis: "y",
                  handle: "h3",
                  stop: function (event, ui) {
                             // IE doesn't register the blur when sorting
                             // so trigger focusout handlers to remove .ui-state-focus
                             ui.item.children("h3").triggerHandler("focusout");
                  }
            });
        }

        set_accordion_as_sortable("#accordion1");
        set_accordion_as_sortable("#accordion2");
    });

    /*
    * hoverIntent | Copyright 2011 Brian Cherne
    * http://cherne.net/brian/resources/jquery.hoverIntent.html
    * modified by the jQuery UI team
    */
    $.event.special.hoverintent = {
        setup: function () {
            $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        teardown: function () {
            $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        handler: function (event) {
            var currentX, currentY, timeout,
args = arguments,
target = $(event.target),
previousX = event.pageX,
previousY = event.pageY;
            function track(event) {
                currentX = event.pageX;
                currentY = event.pageY;
            };
            function clear() {
                target
.unbind("mousemove", track)
.unbind("mouseout", clear);
                clearTimeout(timeout);
            }
            function handler() {
                var prop,
orig = event;
                if ((Math.abs(previousX - currentX) +
Math.abs(previousY - currentY)) < 7) {
                    clear();
                    event = $.Event("hoverintent");
                    for (prop in orig) {
                        if (!(prop in event)) {
                            event[prop] = orig[prop];
                        }
                    }
                    // Prevent accessing the original event since the new event
                    // is fired asynchronously and the old event is no longer
                    // usable (#6028)
                    delete event.originalEvent;
                    target.trigger(event);
                } else {
                    previousX = currentX;
                    previousY = currentY;
                    timeout = setTimeout(handler, 100);
                }
            }
            timeout = setTimeout(handler, 100);
            target.bind({
                mousemove: track,
                mouseout: clear
            });
        }
    };

Answer 1

问题是您设置的手风琴没有header属性，并在设置sortable时尝试稍后添加。您必须在构建手风琴小部件时进行设置，如下所示：

function subscribe_accordion_to_hoverintent_event(accordionId) {
    $(accordionId).accordion({
            header: "> div > h3",
            event: "click hoverintent"
        });
    }

您可以将其从可排序函数中删除：

function set_accordion_as_sortable(accordionId) {
        $(accordionId).sortable({
              axis: "y",
              handle: "h3",
              stop: function (event, ui) {
                         // IE doesn't register the blur when sorting
                         // so trigger focusout handlers to remove .ui-state-focus
                         ui.item.children("h3").triggerHandler("focusout");
              }
        });
    }

JSFiddle结果：http://jsfiddle.net/hNp2z/1/

此外，您问题中的ID不匹配，请务必检查它们。

jQuery UI Accordion - 启用可排序时，内容在标题内绘制

1 个答案: