Question

我正在尝试在屏幕底部创建一个小帮助功能，以帮助用户浏览我的页面，我只是认为将一个Accordian作为一个小下拉显示帮助将是一个很好的方式，但我不能让它工作。

我已经按照This教程进行了操作，因为它非常简单，但根本不起作用。它只是将Lorem Ipsum显示为h3标签。

我已经使用nuget安装了jquery-ui和jquery 3.1.1。

我删除了所有razer语法，因为问题与所有razer无关。我没有测试它，问题仍然存在

@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

没有看到它，很难确定，但我怀疑你的问题是你在页面加载完成之前初始化了datepicker，所以jQuery还没有完成加载。

尝试将datepicker init放在$（document）.ready函数中。

手风琴没有出现在网络浏览器中

1 个答案: