【问题标题】:expand/collapse jquery menu (can't find right selector)展开/折叠 jquery 菜单(找不到正确的选择器)
【发布时间】:2011-05-21 04:48:25
【问题描述】:

在我的菜单中使用无序列表.. 我已经选择了点击工作,但我无法确定仅针对特定列表的选择。我现在拥有它的方式,它展开/折叠具有特定类的所有列表,但我只想将它放在我点击的类上..

这里是 jQuery

<script type="text/javascript">
    $(document).ready(function() {

        $(".login-holder > ul > #loginTitle").click(function() {
            $(".account-links:parent").slideToggle("medium");
        });
    });
</script>

这是 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>
         <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>

【问题讨论】:

  • 这里有一些问题,重复的 ID 和 &lt;span&gt; 不能是 &lt;ul&gt; 的直接子代...还有什么最初隐藏的?
  • 最初没有隐藏任何东西..是的,我知道重复的 ID 是错误的,它们应该是类,因为我使用它来设置列表标题的样式..

标签: jquery jquery-selectors expand collapse


【解决方案1】:

除了不符合标准的 HTML 之外,它还应该为您提供所需的功能

$("#loginTitle").click(function() {
    $(".login-holder").find("li").slideToggle("medium");
});

您不应该对超过 1 个元素使用相同的 ID“loginTitle”,尝试将其切换为 css 类并将上面的选择器更改为 .loginTitle

【讨论】:

  • 谢谢你 - 这仍然会折叠下面的所有列表项..我只希望一次折叠一个部分..
  • ahh .. 现在可以完美运行了,我会将 ID 修复为类以及合规性
  • 请注意,除非您将该 ID 更改为一个类,否则它不会起作用,您不应在一个页面上多次使用相同的 ID。
猜你喜欢
  • 2015-10-13
  • 2017-02-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-14
  • 2014-12-20
相关资源
最近更新 更多