开发者

Collapsible menu with jQuery

开发者 https://www.devze.com 2023-01-22 20:24 出处:网络
I need collapsible menu with first <ul> is opened and others are closed in jQuery <div class=\"accordion\" id=\"list1b\">

I need collapsible menu with first <ul> is opened and others are closed in 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">Fri开发者_Python百科ends</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>

When I reach the home page I need to open the rides section and the friends section should be closed. Please help me to fix this issue


Is this what you mean?


Judging by your mark-up, I think what you're after is very similar to what I have in my CMS. Using 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;
            }
        });
    });
};

This plug-in was written based on http://www.i-marco.nl/weblog/jquery-accordion-3/.

0

精彩评论

暂无评论...
验证码 换一张
取 消