JQuery多列表手风琴问题

时间:2012-06-25 15:41:51

标签: jquery list menu accordion

我有两个列表,我希望其功能类似于手风琴,当点击指定的元素时,指定的列表会被隐藏,再次点击它会切换到显示。

HTML:

    <ul class="acc" id="acc">
            <li>
                    <h3 class="slide">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view">

                    <ul>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                    </ul>
            </div>
            </div>
            </li>

            <li>
                    <h3 class="slide2">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view2">

                    <ul>

                   <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

</ul>
            </div>
            </div>
            </li>
    </ul>

我使用以下代码为两个列表完成了此操作:

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view').fadeIn('slow'); 
            return false; 
    }); 
    $('h3.slide2').toggle(function() { 
    $('div.view2').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view2').fadeIn('slow'); 
            return false; 
    }); 
}); 

我的问题是它不是“动态的”,如果我将来添加另一个列表,那么我还需要上面的代码。我希望能够只使用一小段代码并为clickable元素和show / hide元素重用相同的两个类名。我尝试使用以下代码完成此操作,但无法使其正常工作:

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $(this).siblings('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $(this).siblings('div.view').fadeIn('slow'); 
            return false; 
    }); 
}); 

任何提示?

3 个答案:

答案 0 :(得分:0)

要将事件应用于需要在最初加载DOM之后加载的元素,请尝试jQuery on()函数。类似的东西:

$(function(){
  $('h3.slide').on('toggle', function() { 
    $('div.view').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view').fadeIn('slow'); 
      return false; 
  }); 
  $('h3.slide2').on('toggle', function() { 
    $('div.view2').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view2').fadeIn('slow'); 
      return false;
  }); 
}); 

希望有所帮助。

请参阅:http://api.jquery.com/on/

答案 1 :(得分:0)

你可以在这里使用jquery“最近”而不是兄弟姐妹。 http://api.jquery.com/closest/

例如:

$(this).closest('div.view').fadeOut('slow');

如果这不符合您的需求,请发布您的CSS,我可以帮助您更好。

答案 2 :(得分:0)

感谢您的努力,但我能够使用.slideToggle解决此问题:http://api.jquery.com/slideToggle/