I am using a simple jquery accordian menu. But I want the second item in the list to be open by default rather than the :first
How can this be done?
function initMenu()
{
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function()
{
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible')))
{
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible')))
{
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {initMenu();});
I am also wondering if I could use a selected class to help make this more dynamic:
<div id="work_menu"> <ul id="side_menu" class="nav_categories"> <li> <a href="celebratory-use">Celebratory Use</a> <ul> <li><a href="platters">Platters</a></li> <li><a href="celebratory-servers">Servers</a></li> </ul> </li> <li><a class="selected" href="daily-use">Daily Use</a> <ul> <li><a href="bowls">Bowls</a></li> <li><a href="butter-dishes">Butter Dishes</a></li> <li><a href="mugs">Mugs</a></li> </ul> </li> </ul> </div>
Try $('#menu ul:eq(1)').show();
instead of $('#menu ul:first').show();
, this would apply .show()
to the second element ul
element in #menu
. Without the HTML it is difficult to see if this is the proper solution.
To make it so that the ul
coming after the item given the .selected
class is shown, change $('#menu ul:eq(1)').show();
to $('#side_menu li > a.selected + ul').show();
, so long as the .selected
class is always applied to an <a>
. If you wish to apply it to another sibling element of the <li>
, then change the selector to $('#side_menu li .selected + ul').show();
, which is a little more generalizable.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.