2014-09-03 5 views
0

두 개의 ul 목록을 사용하여 접을 수있는 메뉴 스타일 목록을 만듭니다. 다음은 예이다 : 마지막 요소가 확장 된 예에서accordian 항목이 표시되는지 여부를 확인하는 방법은 무엇입니까?

<ul class="element_list element_group ui-sortable"> 
    <li id="de_1" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_2" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_57" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_47" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_3" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_4" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_18" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_20" class="element_config_form element_group_parent eg-collapsed" style="height: 1em;"></li> 
    <li id="de_49" class="element_config_form element_group_parent eg-expanded" style="height: auto;"> 
     <div></div> 
     <ul class="element_group"> 
      <li id="de_51" class="element_config_form element_group_leaf"></li> 
     </ul> 
    </li> 
</ul> 

그러나 다른 <li> 요소뿐만 아니라 하위 항목이있다.

jQuery sortable API를 사용하여 이러한 요소를 이동시키고 있지만 일부 펑키 한 동작 (요소를 배치하기 위해 마우스를 끌기 위해 앞뒤로 많은 점프 항목)이 나타납니다. 드래그 된 요소가 모든 목록 요소, 심지어 숨겨진 요소와 교차하는지 여부를 확인하기 때문에이 동작이 발생한다고 생각합니다.

내 질문은 보이는 요소와 만 교차로를 확인하는 것입니다. CSS는 보이지 않는 요소를 숨기기 위해 overflow: hidden만을 사용합니다.

감사합니다.

+1

: 여기

구현의 예제와 함께 제공되는 설명서입니까? –

+0

피들 (Fiddle)을 제공하면 더 잘 도와 드릴 것입니다. –

+0

나는 하나를 조합하려고 노력할 것이지만, 사용하는 코드는 다소 복잡하므로 JSFiddle에서 더 간단한 것으로 줄일 수 있을지 확신 할 수 없다. – user5013

답변

0

jQuery .width() 또는 .height 함수를 사용하면 오버플로를 활성화할지 여부를 확인할 수 있으므로 요소의 너비를 확인할 수 있습니다. 당신이 바이올린을 만들 수 http://api.jquery.com/width/

+0

높이 함수를 사용하여 오버플로를 활성화할지 여부를 결정하는 방법을 예제로 보여줄 수 있습니까? 나는 따르고 있지 않다. – user5013

+0

@ user5013 예제는이 답변/게시물에서 제공됩니다. 제공된 문서 링크를 방문하십시오. 특정 질문이있는 경우 아마도 다른 스레드가 더 적절할 것입니다. 설명과 예제를 통해 문제가 해결되면이 게시물을 답으로 표시하여 StackOverflow 커뮤니티의 다른 사용자를 신속하게 해결할 수 있습니다. –

관련 문제