使用jQuery实现可折叠菜单

Question

我需要一个可折叠的菜单，其中第一个<ul>是打开的，其他的都是关闭的，在jQuery中实现。

<div class="accordion" id="list1b"> 
  <a href="/index.php/jstride/vehicle"> Rides</a><ul class="navigation">
<li>
    <a class="menu_user_profile_ride_edit user_add_ride" href="/index.php/jstride/vehicle">Post My Ride</a>
</li>
<li>
    <a class="menu_user_profile_ride_edit user_edit_ride_new" href="/index.php/ride/recent">New Additions</a>

</li>
<li>
    <a class="menu_user_profile_ride_edit user_edit_ride_popular" href="/index.php/ride/popular">Most Popular</a>
</li>
<li>
    <a class="menu_user_profile_ride_edit user_edit_ride_myride" href="/index.php/myride">My Rides</a>
</li>
<li>
   <a class="menu_user_profile_ride_edit user_ride_search" href="/index.php/advancedsearch">Search for Rides</a>
</li>
 </ul>           
  <a href="/index.php/members/browse/controller/index">Friends</a>
  <ul class="navigation">
    <li>
        <a class="menu_user_edit_update user_edit_member" href="/index.php/members">Browse Members</a>
    </li>

    <li>
        <a class="menu_user_edit_update user_edit_update" href="/index.php   /user/updates">View Recent Update</a>
    </li>
    </ul>   
</div>

当我到达主页时，我需要打开“游乐设施”部分，并关闭“朋友”部分。请帮忙解决这个问题。

- Aadi

Answer 1

这是您所指的吗？这里

- red-X

---

手风琴是非常灵活的UI工具。我建议您使用它。 - Alex Pliutau

Answer 2

根据你的标记，我认为你想要的与我的CMS非常相似。使用jQuery：

jQuery(document).ready(function($) {
    $('#menu').accordionMenu();
}

jQuery.fn.accordionMenu = function() {
    return this.each(function() {
        $('#menu ul').hide(); // hide all unordered lists
        $('#menu li.selected ul').show(); // drop down selected item's sub-menu
        $('#menu li a').click(function() {
            var speed = 'fast';
            var checkElement = $(this).next();
            if (checkElement.is('ul')) {
                if (!checkElement.is(':visible')) {
                    if ($('#menu ul:visible').length==0) {
                        checkElement.slideDown(speed).parent().addClass('open');
                    } else {
                        $('#menu ul:visible').slideUp(speed, function() {
                            $(this).parent().removeClass('open');
                            checkElement.slideDown(speed).parent().addClass('open');
                        });
                    }
                }
                return false;
            }
        });
    });
};

这个插件是基于http://www.i-marco.nl/weblog/jquery-accordion-3/编写的。

- Martin Bean