Javascript 手风琴菜单-我怎么知道它会向上或向下滑动？

我有一个手风琴菜单（代码如下），在手风琴菜单下我有一个标签盒。当手风琴菜单扩展时，我想让我的标签框位于扩展菜单下方，而不是覆盖标签框的扩展菜单。因此，在计算打开的子项的数量后，我更改了标记框的css属性“top”的值

<div id="accordion"> 
  <h3>NOTEBOOKS</h3>

  <div class="sub_items" style="padding-top:0px;padding-bottom:0px;">
    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)">
      <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/black-slim.html">  
      <span>BLACK SLIM</span></a>
    </div>

    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)">
      <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/checkered-slim.html"> 
         <span>CHECKERED SLIM</span></a>
    </div>
  </div>

  <h3>Another item</h3>
  <div class=sub_items" ......
.......
.....
</div>

jQuery(document).ready(function() {

   var countTotalCategories = jQuery('#accordion > h3').size();
   var defaultHeight = countTotalCategories * 30;

   jQuery('#accordion> div').hide();  

   jQuery('#accordion> h3').click(function() {
      jQuery(this).next('div').slideToggle(400)
      .siblings('div:visible').slideUp(400);

      countProducts = jQuery(this).next('div').children('div:visible').size();
      var calculatedHeight= defaultHeight + 29 * countProducts;

      jQuery('.mini-product-tags').css('top' , calculatedHeight + 'px');
});

笔记本
另一项
这可能不是最漂亮的方法，但为什么不直接找出
之后的下一个元素（即您的实际手风琴容器
标记）是否有
显示：none

如果容器可见，则单击事件将关闭它。如果容器不可见，则单击事件将打开它

因此：

我同意，你需要检查一下能见度。我也会考虑使用不同的标记。

这是一个

jquery：

// hide all that are not active
$("dd:not(#active)").hide(); 

// when the link is clicked (could make this an h3 if you wanted)
$("dt a").click(function(){ 
    // slide up the visible siblings
    $(this).parent().next().siblings("dd:visible").slideUp("fast"); 
    // slide down the next parent
    $(this).parent().next().slideDown("fast"); 
    // remove the class of current from any other dt a
    $(".current").removeClass("current"); 
    // add the class of current to the anchor tag
    $(this).addClass("current"); 
    return false; 
}); 

html：

<dl> 
<dt><a href="#">SOME ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li>           
</ul> 
</dd> 

<dt><a href="#">OTHER ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li>           
</ul> 
</dd> 

<dt><a href="#">ZOMG, MORE ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li>           
</ul> 
</dd> 



某物
某物
某物
某物
某物
某物


其他事情
其他事情
其他事情
其他事情
其他事情
其他事情


更多内容
更多内容
更多内容
更多内容
更多内容
更多内容


<dl> 
<dt><a href="#">SOME ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li>           
</ul> 
</dd> 

<dt><a href="#">OTHER ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li>           
</ul> 
</dd> 

<dt><a href="#">ZOMG, MORE ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li>           
</ul> 
</dd>