0

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

http://jqueryui.com/accordion/#sortable

我遇到了奇怪的行为（请参见以下链接中的图片）

http://snag.gy/lcEen.jpg

如您所见，我有两个标题，过滤器和添加组件。奇怪的行为是例如在过滤器的情况下，内容被绘制在标题“过滤器”中，为什么？“添加组件”标题也是如此。

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

1 回答 1

1

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

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

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

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 不匹配，请务必检查这些。

于 2013-09-30T21:15:57.050 回答