expand/collapse jquery menu (can't find right selector)
Using an unordered list for my menu .. I've got the selection for the click working, but I can't figure out the selection for only the specific list. The way I have it now, it expands/collapses all the lists with the specific class, but I only want to have it on the class I've clicked in..
Here is the jQuery
<script type="text/javascript">
$(document).ready(function() {
$(".login-holder > ul > #loginTitle").click(function() {
$(".account-links:parent").slideToggle("medium");
});
});
</script>
Here is the HTML
<div class="login-holder">
<p><strong>Welcome, <%= ViewModel.Profile.Name.First %></strong></p>
<ul class="account-links">
<span id="loginTitle">User Options</span><br /><br />
<li>
<%= Html.ActionLink<EventController>( x => x.List(), "Events Near Me" )%>
</li>
<li>
<%= Html.ActionLink<MyEventsController>( x => x.List(), "My Events" )%>
</li>
<li>
<%= Html.ActionLink<AccountController>( x => x.Edit(), "My Profile" )%>
</li>
<li>
<%= Html.ActionLink<ClubController>( x => x.List(), "Clubs Near Me" )%>
</li>
开发者_JS百科 <li>
<%= Html.ActionLink<MyClubsController>( x => x.List(), "My Clubs" )%>
</li>
<li>
<%= Html.ActionLink<AccountController>( x => x.ChangePassword(), "Change My Password" )%>
</li>
<li>
<%= Html.ActionLink<DependantController>( x => x.List(), "My Dependants" ) %>
</li>
</ul>
</div>
<div class="login-holder">
<ul class="account-links">
<span id="loginTitle">Organizer Details<!--<span id="toggle" style="margin-left: 32px; padding-right: 10px;"></span>--></span><br /><br />
<!--<div id="additions">-->
<li>
<%= Html.ActionLink<AccountController>( x => x.Organizer(), "Organizer Details" )%>
</li>
<li>
<%= Html.ActionLink<EventController>( x => x.Edit( default(int?) ), "Post An Event" )%>
</li>
<li>
<%= Html.ActionLink<EventAdminController>( x => x.List(), "Events Created By Me" ) %>
</li>
<li>
<%= Html.ActionLink<ClubController>( x => x.Edit( default( int? ) ), "Create A Club" )%>
</li>
<li>
<%= Html.ActionLink<ClubAdminController>( x => x.List( ), "Clubs Created By Me" )%>
</li>
<!--</div>-->
</ul>
</div>
Aside from the non-standards compliant HTML, this should give you the functionality you want
$("#loginTitle").click(function() {
$(".login-holder").find("li").slideToggle("medium");
});
You should not use the same ID "loginTitle" for more than 1 element, try switching it to a css class and change the selector above to .loginTitle
精彩评论