javascript – 如何让我的网站在刷新后记住我的Jquery手风琴菜单状态？
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 如何让我的网站在刷新后记住我的Jquery手风琴菜单状态？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9457字，纯文字阅读大概需要14分钟。
内容图文
我找到了嵌套Jquery手风琴的代码并且像魅力一样工作,但是当我点击侧边栏中的菜单或子菜单(重定向到不同网址的链接)时,我发现了一个大问题,然后网站不记得应该显示哪个菜单或子菜单刷新后隐藏(默认状态为隐藏除1级别以外的所有内容).是否有任何选项可以让我的菜单在刷新之前记住最后状态？非常感谢您的帮助.
HTML：
<ul>
<li>
<a href="foo1.php">level 2</a>
<ul>
<li><a href="foo2.php">a</a></li>
<li><a href="foo3.php">b</a></li>
</ul>
</li>
<li>
<a href="foo4.php">level 2</a></li>
<ul>
<li>
<a href="foo5.php">level 3</a>
<ul>
<li><a href="foo6.php">c</a></li>
<li><a href="foo7.php">d</a></li>
</ul>
</li>
<li><a href="foo8.php">e</a></li>
<li><a href="foo9.php">f</a></li>
</ul>
</li>
</ul>
jQuery的：
$('ul li ul').hide();
$('ul li').click(function(ev) {
$(this).find('>ul').slideToggle();
ev.stopPropagation();
});
真实的HTML：
<ul class="arrows_list1-1">
<h3>Na?e produkty</h3>
<div class="menu-produkty-container">
<ul id="menu-produkty" class="menu">
<li id="menu-item-97" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-97">
<a href="http://www.odsavacky.cz/wpccategories/akce/">Akce</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-114">
<a href="http://www.odsavacky.cz/wpccategories/akcni-ceny/">Ak?ní ceny</a>
</li>
<li id="menu-item-98" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-98">
<a href="http://www.odsavacky.cz/wpccategories/novinky/">Novinky</a>
</li>
</ul>
</li>
<li id="menu-item-63" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories current-wpccategories-ancestor current-menu-ancestor current-menu-parent current-wpccategories-parent menu-item-has-children menu-item-63">
<a href="http://www.odsavacky.cz/wpccategories/spotrebni-material/">Spot?ební materiál</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-66" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-66">
<a href="http://www.odsavacky.cz/wpccategories/kyslikova-terapie/">Kyslíková terapie</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-67" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-67">
<a href="http://www.odsavacky.cz/wpccategories/kyslikove-masky-a-nosni-sondy/">Kyslíkové masky a nosní sondy</a>
</li>
<li id="menu-item-176" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-176">
<a href="http://www.odsavacky.cz/wpccategories/masky-inhalacni/">Masky inhala?ní</a>
</li>
<li id="menu-item-68" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-68">
<a href="http://www.odsavacky.cz/wpccategories/mikronebulizatory/">Mikronebulizátory</a>
</li>
<li id="menu-item-179" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-179">
<a href="http://www.odsavacky.cz/wpccategories/prutokomery/">Pr?tokoměry</a>
</li>
<li id="menu-item-180" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-180">
<a href="http://www.odsavacky.cz/wpccategories/redukcni-ventily/">Reduk?ní ventily</a>
</li>
<li id="menu-item-178" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-178">
<a href="http://www.odsavacky.cz/wpccategories/prislusenstvi-k-tep-nebulizatorum/">P?íslu?enství k tep. nebulizátor?m</a>
</li>
<li id="menu-item-175" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-175">
<a href="http://www.odsavacky.cz/wpccategories/kyslikove-zvlhcovace-prislusenstvi/">Kyslíkové zvlh?ova?e, p?íslu?enství</a>
</li>
<li id="menu-item-181" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-181">
<a href="http://www.odsavacky.cz/wpccategories/studene-nebulizatory-prislusenstvi/">Studené nebulizátory, p?íslu?enství</a>
</li>
</ul>
</li>
<li id="menu-item-73" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-73">
<a href="http://www.odsavacky.cz/wpccategories/resuscitace-intubace/">Resuscitace, intubace</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-189" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-189">
<a href="http://www.odsavacky.cz/wpccategories/laryngoskopy/">Laryngoskopy</a>
</li>
<li id="menu-item-188" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-188">
<a href="http://www.odsavacky.cz/wpccategories/laryngealni-masky/">Laryngeální masky</a>
</li>
<li id="menu-item-190" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-190">
<a href="http://www.odsavacky.cz/wpccategories/masky-resuscitacni/">Masky resuscita?ní</a>
</li>
<li id="menu-item-192" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-192">
<a href="http://www.odsavacky.cz/wpccategories/rucni-resuscitatory/">Ru?ní resuscitátory</a>
</li>
<li id="menu-item-191" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-191">
<a href="http://www.odsavacky.cz/wpccategories/prislusenstvi-defibrilace/">P?íslu?enství defibrilace</a>
</li>
</ul>
</li>
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-71">
<a href="http://www.odsavacky.cz/wpccategories/odsavani/">Odsávání</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-182" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-182">
<a href="http://www.odsavacky.cz/wpccategories/odsavaci-cevky/">Odsávací cévky</a>
</li>
<li id="menu-item-183" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-183">
<a href="http://www.odsavacky.cz/wpccategories/odsavaci-hadice/">Odsávací hadice</a>
</li>
<li id="menu-item-184" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-184">
<a href="http://www.odsavacky.cz/wpccategories/odsavaci-lahve/">Odsávací lahve</a>
</li>
<li id="menu-item-185" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-185">
<a href="http://www.odsavacky.cz/wpccategories/odsavaci-vaky/">Odsávací vaky</a>
</li>
<li id="menu-item-186" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-186">
<a href="http://www.odsavacky.cz/wpccategories/saci-filtry/">Sací filtry</a>
</li>
<li id="menu-item-187" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-187">
<a href="http://www.odsavacky.cz/wpccategories/stopventily/">Stopventily</a>
</li>
</ul>
</li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-70">
<a href="http://www.odsavacky.cz/wpccategories/narkotizace-umela-plicni-ventilace/">Narkotizace, umělá plicní ventilace</a>
</li>
<li id="menu-item-64" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories current-menu-item menu-item-64">
<a href="http://www.odsavacky.cz/wpccategories/diagnostika/">Diagnostika</a>
</li>
<li id="menu-item-65" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-65">
<a href="http://www.odsavacky.cz/wpccategories/ekg-prislusenstvi/">EKG – p?íslu?enství</a>
</li>
<li id="menu-item-69" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-69">
<a href="http://www.odsavacky.cz/wpccategories/monitoring-defibrilace/">Monitoring, defibrilace</a>
</li>
<li id="menu-item-72" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-72">
<a href="http://www.odsavacky.cz/wpccategories/operacni-svetla/">Opera?ní světla</a>
</li>
</ul>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-75">
<a href="http://www.odsavacky.cz/wpccategories/zdravotnicke-pristroje/">Zdravotnické p?ístroje</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-76" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-76">
<a href="http://www.odsavacky.cz/wpccategories/kyslikova-terapie-zdravotnicke-pristroje/">Kyslíková terapie</a>
</li>
<li id="menu-item-77" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-77">
<a href="http://www.odsavacky.cz/wpccategories/resuscitace-intubace-zdravotnicke-pristroje/">Resuscitace, intubace</a>
</li>
</ul>
</li>
<li id="menu-item-74" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-74">
<a href="http://www.odsavacky.cz/wpccategories/vyukovy-program/">Vyukovy program</a>
</li>
<li id="menu-item-62" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-62">
<a href="http://www.odsavacky.cz/wpccategories/nahradni-dily/">Náhradní díly</a>
</li>
</ul>
</div>
</ul>
真正的Jquery：
$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
$(this).find('>ul').slideToggle();
ev.stopPropagation();
});
解决方法:
我们将检查当前的URL并打开：
>当前URL的相应??级别
>所有的父母.子菜单
>他的兄弟姐妹.菜单
码：
$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
$(this).find('>ul').slideToggle();
ev.stopPropagation();
});
var url = window.location.href;
var $current = $('.arrows_list1-1 li a[href="' + url + '"]');
$current.parents('.sub-menu').slideToggle();
$current.next('.sub-menu').slideToggle();
内容总结
以上是互联网集市为您收集整理的javascript – 如何让我的网站在刷新后记住我的Jquery手风琴菜单状态？全部内容，希望文章能够帮你解决javascript – 如何让我的网站在刷新后记住我的Jquery手风琴菜单状态？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】