토글 할 때 jquery 요소의 위치

Question

나는 함께 갈 페이지 목록을 포함 할 카테고리가있는 페이지를 만들 것입니다. 처음에는 모든 목록이 숨겨져 있으며 범주를 클릭하면 목록이 아래로 슬라이드됩니다. 이 스크립트의 코드입니다 :

이

$(document).ready(function() { 
      $('.menu-list').hide(); 
      $('.menu-title').click(function() { 
       if ($(this).next().is(':not(:visible)')) { 
        $('.menu-list:visible').slideUp(); 
        $(this).next().slideDown(); 
       } 
    }); 

스크립트가 작동하지만 다른보다 더 많은 종류가있는 열에서 카테고리를 클릭있을 때 문제입니다. 마지막 카테고리보다 왼쪽으로 이동하고 싶지 않습니다. jsfiddle의 코드는 다음과 같습니다. http://jsfiddle.net/U7rKX/4/

도와 주시겠습니까?

Answer 1

당신은 당신이 오른쪽 테두리에 항상 세 번째 메뉴 float로 원하는 경우 수레을 취소해야합니다.

모든 메뉴가 오른쪽으로 이동하기 때문입니다. 높이가 같으면 두 번째 메뉴가 첫 번째 메뉴 옆에 떠있게됩니다. 세 번째 줄에는이 줄이 없으므로 오른쪽에 배치됩니다. 그러나 첫 번째 메뉴가 슬라이드 아웃되면 세 번째 메뉴의 행에 뭔가가 생깁니다. 따라서 세 번째 메뉴가 첫 번째 메뉴 옆에 떠있게됩니다. 여기

는 작업 바이올린입니다 : http://jsfiddle.net/U7rKX/6/

Answer 2

두 개의 열 div (가로 50 %, 왼쪽으로 떠남)를 추가하고 각 카테고리를이 중 하나에 추가 할 수 있습니다. 그 중 하나가 팽창하면 나머지는 밀려납니다. 이제는 모든 카테고리가 올바르게 플로팅되어 페이지가 리플 로우됩니다.이 경우 정확한 페이지 레이아웃은 카테고리의 높이에 따라 크게 달라집니다. 당신이 PHP에서 카테고리를 인쇄 할 때

먼저 열에서 해당 카테고리를 분할하기 위해이 같은 작업을 수행 할 수 있습니다

<?php 
    $leftCol = array(); 
    $rightCol = array(); 

    for($i=0; $i<sizeof($categoryList); $i++){ 
     if($i%2 < 1){ 
      array_push($leftCol, $categoryList[$i]; 
     }else{ 
      array_push($rightCol, $categoryList[$i]; 
     } 
    } 
?> 

이제 적절한 열 div의에 $ leftCol의 내용과 $ rightCol를 인쇄 할 수 있습니다.

Working example JSFiddle