0
ユーザーのページをナビゲートするのに役立つ小さなヘルプ機能を画面の下部に作成しようとしていますが、ちょっとしたアコーディオンドロップダウンはヘルパーに見えますが、私はそれをまったく動作させることはできません。アコーディオンがウェブブラウザに表示されない
チュートリアル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")
}
ここではほとんど問題が混乱しています。 '＃accordion'とその内容だけでなく、小さなjQueryスクリプト（とjQuery + jQuery UIを含む）をスタックスニペットにコピー/ペーストすれば正常に動作します。あなたは全く何もしないという意味ですか？ヘッダーやその他の問題をクリックすると、アコーディオンは開いたり閉じたりしません。 – cjl750
@ cjl750それはアコーディオン効果をしません、ちょうど私がアコーディオンをしようとしていなかったかのようにHTMLをレンダリングします –
それでは言いにくいです。あなたのページから干渉している他のJSが存在する可能性があります。実際にレンダリングされたHTMLをチェックし、正しく出力されているかどうかを確認する必要があります。あるいは、デフォルトでは、組み込みのjQuery UIスタイルを閉じると、アコーディオンのdivが常に開いた状態になるようにすることで問題を引き起こすCSSがいくつかあります。問題を再現するのに十分な情報で質問を更新できる場合は、私は見てみることができます。 – cjl750