jQuery UI Accordion - 정렬 기능을 사용할 때 제목에 내용이 그려집니다.

Question

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

Answer 1

문제는 당신이 header없이 아코디언을 설정한다는 것입니다 속성을 설정하고 나중에 정렬을 설정할 때 추가하십시오. 또한, http://jsfiddle.net/hNp2z/1/

:이 같은 아코디언 위젯을 구축 할 때 당신은 그것을 설정해야합니다

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 결과 이드는 귀하의 질문에 일치하지 않습니다, 너무 그들을 확인하십시오.