1

我不知道这里发生了什么..我正在尝试在我的菜单上添加一个滑动切换..看起来很简单..我试图简化它以尝试找到问题（意味着我已经采取了所有链接出和额外的jquery，只有底部的例子 - 最后的段落）但我不知道错误是什么..（其他它没有做任何事情）

包括：

<script type="text/javascript" src="/raceday/Scripts/jquery-1.4.2.min.js"></script>

剧本：

<script type="text/javascript">
$("button").click(function() {
    $("p").slideToggle("slow");
});

的HTML：

<div class="ttl-area">
   <h2 class="ttl-account"><span>Account</span></h2>
</div>
<div class="account-area">
   <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(), "All Events" )%>
         </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(), "All Clubs" )%>
         </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>
  <% if ( ViewModel.Profile.HasOrganizerInfo ) { %>
  <div class="login-holder">
     <ul class="account-links">
        <span id="loginTitle">Organizer Details</span><br /><br />
        <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>
         <!-- if ( ViewModel.Profile.IsAdministrator ) { -->
         <li>
            <%= Html.ActionLink<EventReportController>( x => x.List(), "Event Report" ) %>
         </li>
         <!-- } -->
     </ul>
  </div>
  <% } %>
  <% if ( ViewModel.Profile.HasTimerInfo ) { %>
  <div class="login-holder">
     <ul class="account-links">
        <span id="loginTitle">Timer Details</span><br /><br />
        <li>
           <%= Html.ActionLink<AccountController>( x => x.Timer(), "Timer Details" )%>
        </li>
        <li>
           <%= Html.ActionLink<EventTimerController>( x => x.List(), "Events Timed By Me" ) %>
        </li>
     </ul>
  </div>
  <% } %>
      <ul class="account-links">
      <% if ( ( !ViewModel.Profile.HasOrganizerInfo ) || ( !ViewModel.Profile.HasTimerInfo) ) { %>   
         <span id="loginTitle">Additional Options</span><br /><br />
      <% } %>         
         <% if ( !ViewModel.Profile.HasTimerInfo ) { %>
            <li>
               <%= Html.ActionLink<AccountController>( x => x.Timer(), "I Time Events" )%>
            </li>
         <% } %>

         <% if ( !ViewModel.Profile.HasOrganizerInfo ) { %>
            <li>
               <%= Html.ActionLink<AccountController>( x => x.Organizer(), "I Organize Events" )%>

            </li>
         <% } %>

            <li><%= Html.ActionLink<AccountController>( x => x.Logout(), "Log Out" ) %></li>
      </ul>

</div>
        <button>Hide 'em</button>

  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
4

3 回答 3

5

您的代码需要在document.ready处理程序中，以便$("button")选择器找到将click处理程序绑定到的元素。

$(function() {
  $("button").click(function() {
    $("p").slideToggle("slow");
  });   
});

如果 DOM 还没有准备好，<button>元素可能还没有添加/准备好，这意味着它$("button")仍然会绑定到它找到的所有元素......但它不会找到它们，导致完全缺乏行为，这就是你所看到的。

于 2010-10-04T17:28:23.783 回答
1

您需要将其包装为加载方法：

$(document).load(function(){
    $("button").click(function() {
        $("p").slideToggle("slow");
    });
})
于 2010-10-04T17:27:37.277 回答
0

尝试过这样的事情？

jQ = jQuery.noconflict();

jQ("button").click(function() {
    jQ("p").slideToggle("slow");
});

也许 asp 弄乱了你的 $

于 2010-10-04T17:27:50.367 回答