Question

我不知道这里发生了什么......我正在尝试在我的菜单上添加一个幻灯片...看起来非常简单..我试图简化这个尝试找到问题（意思是我的采取所有的链接和额外的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>

Answer 1

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

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

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

Answer 2

你需要将它包装成一个加载方法：

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

Answer 3

试过这样的事情？

jQ = jQuery.noconflict();

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

也许asp正在弄乱你的$

jQuery甚至没有被调用

3 个答案: