手风琴不是asp.net mvc中的一个功能

Question

我没有得到任何输出。任何人都可以帮我解决这个问题吗？

我已经在ASP.net上研究了这个MVC项目几天了。我想在我的项目中集成jQuery-UI。我导入了所有必需的文件，但我没有得到任何输出。我在下面提供样本手风琴代码。

<div id="acc">
<h4>Section1</h4>
    <div>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </div>
<h4>Section2</h4>
    <div>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. 
    </div>
<h4>Section3</h4>
    <div>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
    </div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script>
    $(document).ready(function ()
    {
        $("#acc").accordion({event:"mouseover"});
    }
    );
</script>

Answer 1

1. 确保页面中包含jQuery UI库脚本
2. 确保它包含在jQuery本身之后。
3. 确保浏览器何时请求这些文件，服务器将返回这些文件。使用Chrome或任何浏览器调试程序，然后转到网络标签。然后刷新页面并确保发出请求以获取这些文件并且响应不是错误。如果它是一个错误，因为它找不到该文件，那么修复路径以便它可以找到它。

Answer 2

您的代码看起来很好 - 请参阅下面的代码片段，其中我使用了HTML并替换了相对包含的JS / CSS文件，并将其替换为Google hosted Libraries CDN中的文件。一种选择是使用从Google或其他主机托管的文件，这可以为世界各地的用户提供更快的加载时间等优势（有关详细信息，请参阅this answer）。

如果您继续托管自己的文件，请确保正确下载文件。在大多数浏览器中，您可以按 F12 加载浏览器控制台。有关更多信息，请查看this page上的视频。您可能会在下面的图片中看到错误，例如404错误，其中找不到CSS文件：

$(document).ready(function() {
  $("#acc").accordion({
    event: "mouseover"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="acc">
  <h4>Section1</h4>
  <div>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
    a velit eu ante scelerisque vulputate.
  </div>
  <h4>Section2</h4>
  <div>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
  </div>
  <h4>Section3</h4>
  <div>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
    nisi, eu iaculis leo purus venenatis dui.
  </div>
</div>

Answer 3

确保在加载Jquery后包括jquery UI，asp.net mvc将jquery作为_layout.cshtml的一部分加载，确保在@ Scripts.Render（“〜/ bundles / jquery”）之后在该文件中包含jui ui。

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>