Web浏览器中未显示手风琴

Question

I'm trying to create a little help function at the bottom of my screen to help users navigate my page, I just think it would be a nice sleak way to have a Accordian as a little drop down appear helper but I cannot get it to work at all. 我正在尝试在屏幕底部创建一个帮助功能，以帮助用户浏览我的页面，我只是认为将Accordian作为一个不错的选择是可以的，因为下拉菜单会显示帮助器，但我无法找到它工作。

I have followed This tutorial as it is very simple but it does not work at all. 我已经遵循了本教程，因为它非常简单，但根本无法使用。 it just displays the Lorem Ipsum as h3 tags. 它只是将Lorem Ipsum显示为h3标签。

I've got jquery-ui and jquery 3.1.1 installed using nuget. 我已经使用nuget安装了jquery-ui和jquery 3.1.1。

I have removed all of the razer syntax as the issue does not concern all of the razer. 我已删除了所有razer语法，因为该问题并不涉及所有razer。 I tested it without and the problem still persists 我没有测试它，问题仍然存在

@model WAD_Tracker.Models.Weight

@{
    ViewBag.Title = "Create";
}

<h2>Create a new Weight Entry</h2>

<head>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion({
                collapsible: true
            });
        });
    </script>
</head>



<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>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.</p>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>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. </p>
    </div>
    <h3>Section 3</h3>
    <div>
        <p>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. </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
</div>


<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
    $(".date-picker").datepicker();
</script>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
 @Styles.Render("~/Content/jquery-ui.css")

}

Answer 1

Without seeing it live, it's hard to be sure, but I suspect your issue is that you are initializing the datepicker before the page loading is complete, and so jQuery hasn't finished loading yet. 没有实时看到它，很难确定，但是我怀疑您的问题是您正在页面加载完成之前初始化datepicker，因此jQuery尚未完成加载。

Try putting the datepicker init in a $(document).ready function. 尝试将datepicker初始化放在$（document）.ready函数中。

Web浏览器中未显示手风琴

问题描述

1 个解决方案

解决方案1
0 2017-09-01 02:22:35

Web浏览器中未显示手风琴

问题描述

1 个解决方案

解决方案1 0 2017-09-01 02:22:35

解决方案1
0 2017-09-01 02:22:35