1. 首頁
  2. 問答
  3. javascript ui accordion

javascript ui accordion

2012-07-27 53 views
0

我正在嘗試在我的項目中使用手風琴。據我瞭解，JavaScript鏈接應該添加在佈局頁面，並在索引頁中的JavaScript代碼，它必須顯示。 但瀏覽器表示$（＃「accordion」）。accordion不是函數。 這裏是_Layout的代碼。javascript ui accordion

@using kazwaySite 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     <meta name="viewport" content="width=device-width" 
     @Styles.Render("~/Content/themes/base/css", "~/Content/css") 
     @Scripts.Render("~/bundles/modernizr") 

    <link type="text/css" href="~/Scripts/css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/js/jquery-1.7.2.min.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/js/jquery-ui-1.8.22.custom.min.js")"></script> 

    </head> 
    <body> 
     <header> 
      <div class="content-wrapper"> 
       <div class="float-left"> 
        <p class="site-title">@Html.ActionLink("Your logo here", "Index", "Home")</p> 
       </div> 
       <div class="float-right"> 
        <section id="login"> 
         @Html.Partial("_LoginPartial") 
        </section> 
        <nav> 
         <ul id="menu"> 
          <li>@Html.ActionLink(Resources.mainPage , "Index", "Home")</li> 
          <li>@Html.ActionLink(Resources.aboutPage, "About", "Home")</li> 
          <li>@Html.ActionLink(Resources.productsPage, "Index", "Home")</li> 
          <li>@Html.ActionLink(Resources.capabilitiesPage, "Index", "Home")</li> 
          <li>@Html.ActionLink(Resources.newsPage, "About", "Home")</li> 
          <li>@Html.ActionLink(Resources.partnersPage, "Index", "Home")</li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
     </header> 
     <div id="body"> 
      @RenderSection("featured", required: false) 
      <section class="content-wrapper main-content clear-fix"> 
       @RenderBody() 
      </section> 
     </div> 
     <footer> 
      <div class="content-wrapper" > 
      <table > 
      <tr style="font-size:20px;font-weight:500;"> 
      <td>@Html.ActionLink("О компании", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      <td>@Html.ActionLink("Возможности", "About", "Home")</td> 
      <td>@Html.ActionLink("Новости", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      </tr> 
      <tr style="font-size:12px;font-weight:500;"> 
      <td>@Html.ActionLink("О компании", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      <td>@Html.ActionLink("Возможности", "About", "Home")</td> 
      <td>@Html.ActionLink("Новости", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      </tr> 
      <tr style="font-size:12px;font-weight:500;"> 
      <td>@Html.ActionLink("О компании", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      <td>@Html.ActionLink("Возможности", "About", "Home")</td> 
      <td>@Html.ActionLink("Новости", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      </tr> 
      <tr style="font-size:12px;font-weight:500;"> 
      <td>@Html.ActionLink("О компании", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      <td>@Html.ActionLink("Возможности", "About", "Home")</td> 
      <td>@Html.ActionLink("Новости", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      </tr> 
      <tr style="font-size:12px;font-weight:500;"> 
      <td>@Html.ActionLink("О компании", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      <td>@Html.ActionLink("Возможности", "About", "Home")</td> 
      <td>@Html.ActionLink("Новости", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      </tr> 
      <tr style="font-size:12px;font-weight:500;"> 
      <td>@Html.ActionLink("О компании", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      <td>@Html.ActionLink("Возможности", "About", "Home")</td> 
      <td>@Html.ActionLink("Новости", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      </tr> 
      <tr style="font-size:12px;font-weight:500;"> 
      <td>@Html.ActionLink("О компании", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      <td>@Html.ActionLink("Возможности", "About", "Home")</td> 
      <td>@Html.ActionLink("Новости", "About", "Home")</td> 
      <td>@Html.ActionLink("О продукции", "About", "Home")</td> 
      </tr> 

      </table> 
       <div class="float-left"> 
        <p>&copy; @DateTime.Now.Year - ONM Web studio</p> 
       </div> 
       <div class="float-right"> 
        <ul id="social"> 
         <li><a href="http://facebook.com" class="facebook">Facebook</a></li> 
         <li><a href="http://twitter.com" class="twitter">Twitter</a></li> 
        </ul> 
       </div> 
      </div> 
     </footer> 

     @Scripts.Render("~/bundles/jquery") 
     @RenderSection("scripts", required: false) 
    </body> 
</html>

的index.cshtml

代碼 
@model IEnumerable<kazwaySite.Models.News> 


    <script type="text/javascript"> 
     $(function() { 
      $("#accordion").accordion({ header: "h3" }); 
     }); 
    </script> 
     <div id="accordion"> 
      <div> 
       <h3><a href="#">First</a></h3> 
       <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
      </div> 
      <div> 
       <h3><a href="#">Second</a></h3> 
       <div>Phasellus mattis tincidunt nibh.</div> 
      </div> 
      <div> 
       <h3><a href="#">Third</a></h3> 
       <div>Nam dui erat, auctor a, dignissim quis.</div> 
      </div> 
     </div>

來源

2012-07-27 Nate

+1

爲什麼在你的問題的標題你寫的'ASP.NET MVC 3'當你所示的代碼顯然是'ASP.NET MVC 4' ？ – 2012-07-27 12:11:45

+0

這是我的錯，它確實是mvc 4. – Nate 2012-07-27 12:16:44

回答

2

如果功能手風琴沒有被定義，則jQuery UI的未加載。檢查瀏覽器，該鏈接指向正確的位置。

來源

2012-07-27 12:19:45 gor

+1

如果jquery ui javascript確實已經加載了它，也許值得檢查一下你的jquery-ui-1.8.22.custom.min.js文件中是否包含了手風琴插件 - 如果不是，那麼這可能會導致錯誤。您可以通過將鏈接更改爲完整UI的CDN版本（例如http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min）來快速檢查是否屬於這種情況。 JS）。 – KevD 2012-07-27 12:30:54

1

你已經做了一個完整的混亂與你的JavaScript包含。你已經多次包括jquery（一次在頭部，一次在底部），你沒有覆蓋你在你的視圖中佈局中定義的腳本部分，...

讓我們試着清理一下。由於這是一個ASP.NET MVC 4應用程序，我會推薦你​​使用bundle。開箱即用的捆綁包很多，但您可以獲得jquery和jqueryui。這2個就足夠了。您不需要分別包含捆綁包和腳本。這完全違背了捆綁的目的，而且你經常以僞造腳本結束......因此，請在您的~/App_Start/BundleConfig.cs文件中繼續並定義要使用的捆綁包。如果您想使用更新版本的腳本，請更新NuGets。在一天結束時，您應該在~/Scripts文件夾中爲其配置所需的腳本併爲其配置捆綁ID。

@using kazwaySite 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     <meta name="viewport" content="width=device-width" 
     @Styles.Render("~/Content/themes/base/css", "~/Content/css") 
     <link type="text/css" href="~/Scripts/css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" /> 
    </head> 
    <body> 
     ... some markup ommited for clarity ... 

     @Scripts.Render("~/bundles/jquery") 
     @Scripts.Render("~/bundles/jqueryui") 
     @RenderSection("scripts", required: false) 
    </body> 
</html>

和您的視圖中：

@model IEnumerable<kazwaySite.Models.News> 

@section scripts { 
    <script type="text/javascript"> 
     $("#accordion").accordion({ header: "h3" }); 
    </script> 
} 

<div id="accordion"> 
    <div> 
     <h3><a href="#">First</a></h3> 
     <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
     </div> 
    <div> 
     <h3><a href="#">Second</a></h3> 
     <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
     <h3><a href="#">Third</a></h3> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div>

來源

2012-07-27 12:20:10

相關問題

 相關問題