違う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あります： 私はこのようなトップメニューで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> 

私はアンカータグトップメニューでlevel1のaをクリックし、<div class="sub-cat-1 ">はする必要がありますトグル表示されます。

私が試したjqueryのはこれです：

<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をクリックしたときのdivがsub-cat-1（すなわち）まで開かないdivはトグルしません。誰かが間違っている場合は私を修正してください。

Answer 1

表示がnoneに設定されている限り、表示するように強制することはできますが、ブラウザはどのコンテキストでレンダリングするのかが少しでも分かりません。

「visibility：hidden;」を使用します。 sub-cat-1 divに「display：none;」の代わりに私はそれがうまく動作すると期待しています:)