ネストされた非表示のサブナビゲーション リストがいくつかあります
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a class="profile" href="#">Profile</a>
<ul id="profile">
<li><a href="company.html">Company</a></li>
<li><a href="structure.html">Structure</a></li>
<li><a href="team.html">Team</a></li>
</ul>
</li>
<li><a class="projects" href="#">Projects</a>
<ul id="projects">
<li><a href="chapter.html">Chapter</a></li>
<li><a href="pblc-trde.html">Pblc Trde</a></li>
<li><a href="globe.html">Globe</a></li>
<li><a href="komforte.html">Komforte</a></li>
</ul>
</li>
現在、オンラインで見つけたjQueryを使用して、クリック時にサブナビゲーションを表示/非表示にしています。私が達成しようとしていることは次のとおりです。
サブナビメニューの表示/非表示クリック機能をクリーンアップしてほしい。
サブナビゲーションのメニュー項目をクリックすると、対応するページが開き、サブナビゲーションが展開され、対応するメニュー項目にアクティブなクラスが与えられて、ユーザーがどのページにいるのかがわかるようにする必要があります。
これを純粋に JS/jQuery で行うことを望んでいます。サイトのインストールはWordPressになります。
$(document).ready(function () { $(".profile").click(function () { var X = $(this).attr('id'); if (X == 1) { $("#profile").hide(); $(this).attr('id', '0'); } else { $("#profile").show(); $(this).attr('id', '1'); } }); //Mouse click on nav $("#profile").mouseup(function () {}); //Document Click $(document).mouseup(function () { $("#profile").hide(); $(".profile").attr('id', ''); }); $(".projects").click(function () { var X = $(this).attr('id'); if (X == 1) { $("#projects").hide(); $(this).attr('id', '0'); } else { $("#projects").show(); $(this).attr('id', '1'); } }); //Mouse click on nav $("#projects").mouseup(function () {}); //Document Click $(document).mouseup(function () { $("#projects").hide(); $(".projects").attr('id', ''); }); }); window.onload = function () { $("ul#profile li:first").addClass("active"); }; $(document).ready(function () { $("ul#profile").show() });