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

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');
});

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

Answer 1

这样做可能不是最漂亮的方法，但为什么不找出您的<h3>之后的下一个元素（即您的实际手风琴容器<div>标签）是否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>