다른 ul li의 내용을 전환하는 방법은 무엇입니까?

Question

상단 메뉴에서 li을 클릭하면 다른 ul 블록의 div이 표시되어야합니다.

<ul class="level0" style="width: 925px;"> 
<li class="level1"> 
<a href="">Shop By Collection</a> 
</li> 
<li class="level1"> 
<a href="">Shop By feature</a> 
</li> 
<li class="level1"> 
<a href="">All category</a> 
</li> 
</ul> 

을 그리고 다른 블록에서 나는이 같은 ulli 있습니다 : 나는 이런 식으로는 TopMenu에서 ulli이

<ul class="cat-list-1"> 
<?php foreach ($cats as $cat): ?> 
<li class="category-li-1"> 
<a href= "<?php echo $_helper->getCategoryUrl($cat) ?>" > 
    <div class="main-cat-1" ><?php echo $cat->getName() ?> </div> 
    </a> 
    <?php $_category = Mage::getModel('catalog/category')->load($cat->getId()) ?> 
       <?php $_subcategories = $_category->getChildrenCategories() ?> 
       <?php if (count($_subcategories) > 0): ?> 
       <div class="sub-cat-1 " style="display:none;"> 
        <ul class="subcat-list-1"> 
         <?php foreach($_subcategories as $_subcategory): ?> 
          <li> 
           <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"> 
            <?php echo $_subcategory->getName() ?> 
           </a> 
          </li> 
         <?php endforeach; ?> 
        </ul> 
       </div> 
       <?php endif; ?> 
</li> 

<?php endforeach; ?> 
</ul> 

나는 앵커 태그는 TopMenu에서 level1의 a을 클릭 <div class="sub-cat-1 ">는이어야한다 토글되어 표시됩니다.

<script> 
var $j = jQuery.noConflict(); 
$j(function() { 
    $j('li.level1 a').click(function(e) { 
     $j('div.sub-cat-1:visible').hide(); 
    $j('div.sub-cat-1', this).toggle(); 
    }); 

}); 
</script> 

하지만 level 1을 클릭하면 사업부는하지 sub-cat-1가 div이 전환하지 않는 (즉) 열을 수행합니다

내가 노력 JQuery와이입니다. 누군가가 잘못하면 나를 바로 잡으십시오.

Answer 1

display가 none으로 설정되어 있으면 원하는대로 표시되도록 시도 할 수 있지만 브라우저는 어떤 컨텍스트에서 렌더링 할지를 알 수 없습니다.

"visibility : hidden;"을 사용하고 싶습니다. sub-cat-1 div에서 "display : none;"대신 " 그리고 나는 그것이 잘 작동하길 기대한다.