Accordion Menu - 我怎么知道它会向上或向下滑动？答案

【问题标题】：Accordion Menu - How do I know that it will slide up or down?Accordion Menu - 我怎么知道它会向上或向下滑动？
【发布时间】：2009-08-13 00:40:10
【问题描述】：

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

【问题讨论】：

标签： javascript jquery accordion jquery-events

【解决方案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);
      ...

【讨论】：

【解决方案2】：

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

这是working example

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>

【讨论】：