手风琴菜单 - 我如何知道它会向上或向下滑动？

Question

我有一个手风琴菜单（下面的代码），在手风琴菜单下有一个标签框。 当手风琴菜单扩展时，我想让我的标签框位于扩展菜单下方，而不是扩展菜单覆盖我的标签框。 因此，在计算打开的子项数量后，我更改了标签框的 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');
});

现在，我如何知道用户是否正在打开一个新菜单来扩展它......或者用户正在关闭菜单。 我不知道如何确定用户是否正在关闭菜单，因此我可以在所有手风琴菜单关闭时将标签框值设置为默认值。 看来我只是在单击事件之后才发现，我不确定何时处理 jQuery 切换事件。

Answer 1

这可能不是最漂亮的方法，但为什么不直接找出

之后的下一个元素（即您实际的手风琴容器

> 标签）是否有 display: none ？

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

所以：

$(function() {

   ...

   $('#accordion> h3').click(function() {
      if ($(this).next('div').css("display") == "none")
      {
        // My accordion pane is closed
      }
      $(this).next('div').slideToggle(400)
      .siblings('div:visible').slideUp(400);
      ...

Answer 2

我同意，您需要检查可见性。 我还会考虑使用不同的标记。

这是工作示例

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>