Javascript 如何在ASP.NET MVC核心项目的单个视图中正确使用脚本_Javascript_Jquery_Twitter Bootstrap_Visual Studio 2015_Asp.net Core

Javascript 如何在ASP.NET MVC核心项目的单个视图中正确使用脚本

javascript jquery twitter-bootstrap visual-studio-2015 asp.net-core

Javascript 如何在ASP.NET MVC核心项目的单个视图中正确使用脚本,javascript,jquery,twitter-bootstrap,visual-studio-2015,asp.net-core,Javascript,Jquery,Twitter Bootstrap,Visual Studio 2015,Asp.net Core,在VS2015中的ASP.NET核心MVC应用程序中，我们有以下垂直Bootstrap菜单，在项目2上有一个子菜单。如果子菜单展开，用户单击任何主菜单项1、项3或项4，我们希望（项2的）子菜单折叠。如果我们使用外部库，此功能可以正常工作，但如果我们使用“VS2015”的内置默认库（使用默认ASP.NET Core MVC模板创建项目时下载/配置这些库），则此功能不起作用。看起来要么我们没有在单独的视图中正确地使用脚本，要么我们缺少了其他东西问题：我们如何使以下代码在VS2015中工作（注意：请

在

VS2015

中的

ASP.NET核心MVC

应用程序中，我们有以下垂直

Bootstrap

菜单，在项目2上有一个子菜单。如果子菜单展开，用户单击任何主菜单项1、项3或项4，我们希望（项2的）子菜单折叠。如果我们使用外部库，此功能可以正常工作，但如果我们使用“VS2015”的内置默认库（使用默认ASP.NET Core MVC模板创建项目时下载/配置这些库），则此功能不起作用。看起来要么我们没有在单独的视图中正确地使用脚本，要么我们缺少了其他东西

问题：我们如何使以下代码在

VS2015

中工作（注意：请参阅下一个使用外部库的示例。您可以通过将下一个示例复制/粘贴到记事本上并将其另存为

.html

文件来验证它）

在VS2015中查看（如果项目1、3或4的子菜单已展开，则单击该子菜单不会折叠该子菜单）：

如果没有
@section scripts
标记，它还能工作吗？你能显示在VS2015中运行的代码的渲染输出（html）以及_layout.cshtml吗？@Win我刚刚添加了一个更新部分。你为什么还要在其中加入
@section
内容？所提供的两个HTML都使用不同版本的js库（即jQuery3.x和2.2），您怎么能期望它同样工作呢？究竟是什么阻止您将cshtml中的脚本（以及bower依赖项，如果尚未更新）引用更新到新版本？@Tseng I刚刚将引导程序从
3.3.6
升级到
3.3.7
，jquery从
2.2.3
升级到
3.2.1
。清除浏览器上的缓存，运行
清洁解决方案
。但问题依然如此。
<div class="container-fluid"> <div class="row"> <nav> <ul id="menu" class="nav"> <li><a href="#">Link 1</a></li> <li> <a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Link 2 (toggle)</a> <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"> <li><a href="#">Link 2.1</a></li> <li><a href="#">Link 2.2</a></li> <li><a href="#">Link 2.3</a></li> </ul> </li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </nav> </div> </div> @section scripts { <script> function initMenu() { $('#menu ul').hide(); $('#menu > li > a').on('click', function () { $('#menu ul').slideUp(); $(this).next().slideDown(); }); } $(document).ready(initMenu); </script> }

<!doctype html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <nav> <ul id="menu" class="nav"> <li><a href="#">Link 1</a></li> <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Link 2 (toggle)</a> <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"> <li><a href="#">Link 2.1</a></li> <li><a href="#">Link 2.2</a></li> <li><a href="#">Link 2.3</a></li> </ul> </li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </nav> </body> </html> <script> function initMenu() { $('#menu ul').hide(); $('#menu > li > a').on('click', function() { $('#menu ul').slideUp(); $(this).next().slideDown(); }); } $(document).ready(initMenu); </script>

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <environment names="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> </environment> <environment names="Staging,Production"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> </environment> @RenderSection("styles", required: false) </head> <body> <div class="container body-content"> @RenderBody(); </div> <environment names="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> </environment> <environment names="Staging,Production"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery"> </script> <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"> </script> <script src="~/js/site.min.js" asp-append-version="true"></script> </environment> @RenderSection("scripts", required: false) @RenderSection("css", required: false) </body> </html>