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

我的asp.NETMVC4视图中有一个jquery用户界面。我遵循了这里的解释：

下面是我的怪异行为（见下面链接中的图片）

正如您所看到的，我有两个标题，Filter和addcomponent。奇怪的行为是，例如在case Filter中，内容被绘制在标题“Filter”中，为什么？“添加组件”标题也是如此

HTML代码（以下在jQuery ui选项卡中）：

/*IE在排序时存在布局问题（请参见#5413）*/
.group{zoom:1}
(...)
过滤器
添加组件
过滤器
添加其他

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

    $(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
            });
        }
    };

$（函数（）{
函数subscribe\u accordion\u to\u hoverintent\u事件（accordioid）{
$（手风琴ID）。手风琴({
事件：“单击鼠标悬停意图”
});
}
订阅“手风琴”活动（“手风琴1”）；
订阅“手风琴”活动（“手风琴2”）；
});
//折叠内容
$（函数（）{
功能集\u accordion\u可折叠（accordioId）{
$（手风琴ID）。手风琴({
可折叠：正确
});
}
将“手风琴”设置为“可折叠”（“手风琴1”）；
将“手风琴”设置为“可折叠”（“手风琴2”）；
});
//可排序功能
$（函数（）{
功能集\u accordion\u可排序（accordioId）{
$（手风琴ID）。手风琴({
标题：“>div>h3”
}).可排序({
轴：“y”，
手柄：“h3”，
停止：功能（事件、用户界面）{
//IE在排序时不注册模糊
//因此，触发focusout处理程序以删除.ui状态焦点
ui.item.children（“h3”）.triggerHandler（“focusout”）；
}
});
}
将“手风琴”设置为“可排序”（“手风琴1”）；
将“手风琴”设置为“可排序”（“手风琴2”）；
});
/*
*hoverIntent |版权所有2011 Brian Cherne
* http://cherne.net/brian/resources/jquery.hoverIntent.html
*由jQueryUI团队修改
*/
$.event.special.hoverintent={
设置：函数（）{
$（this.bind（“mouseover”，jQuery.event.special.hoverintent.handler）；
},
拆卸：函数（）{
$（this.unbind（“mouseover”，jQuery.event.special.hoverintent.handler）；
},
处理程序：函数（事件）{
var currentX，currentY，超时，
args=参数，
target=$（event.target），
previousX=event.pageX，
previousY=event.pageY；
功能跟踪（事件）{
currentX=event.pageX；
currentY=event.pageY；
};
函数clear（）{
目标
.unbind（“mousemove”，轨迹）
.解除绑定（“鼠标出”，清除）；
clearTimeout（超时）；
}
函数处理程序（）{
var prop，
orig=事件；
if（（数学绝对值）（上一个x-当前x）+
Math.abs（先前-当前））<7）{
清除（）；
事件=$.event（“hoverintent”）；
用于（原始道具）{
如果（！（事件中的道具））{
事件[道具]=原始[道具]；
}
}
//自新事件发生后阻止访问原始事件
//异步激发，旧事件不再
//可用（#6028）
删除event.originalEvent；
目标。触发（事件）；
}否则{
previousX=当前X；
先前的y=当前的y；
超时=设置超时（处理程序，100）；
}
}
超时=设置超时（处理程序，100）；
target.bind({
mousemove:track，
鼠标：清除
});
}
};

问题在于，您在设置手风琴时没有使用

标题

属性，并在以后设置可排序时尝试添加它。在构建手风琴小部件时，必须设置它，如下所示：

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");
              }
        });
    }

JSFIDLE结果：

---

此外，您问题中的id不匹配，请务必检查这些id。

HTML结构是什么？id已更新，并添加了accordion2骨架。你的解决方案很有魅力！

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");
              }
        });
    }