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/.
精彩评论