0

asp.net mvc4ビューにjquery uiアコーディオンがあります。ここで説明したことに従いました：

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

私は奇妙な振る舞いをしています（次のリンクの写真を見てください）

http://snag.gy/lcEen.jpg

ご覧のとおり、Filter と Add Component という 2 つのヘッダー タイトルがあります。奇妙な動作は、たとえば、フィルターの場合、コンテンツがタイトル「フィルター」内に描画されているのはなぜですか? 「コンポーネントの追加」タイトルでも同じことが起こります。

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 に答える