我正在尝试使用移动菜单解决问题。这不是我创建的网站,所以我对开发人员的代码有点不熟悉。我认为问题应该是一个容易解决的问题,但我不能完全解决它。基本上,当您单击“主菜单”按钮时,会出现一个下拉菜单。它会保持不变直到您再次单击主菜单。理想情况下,只要点击菜单中的其他页面,菜单就会关闭。换句话说,单击菜单打开下拉菜单,然后单击“主页”或“关于”将使菜单消失。
遗憾的是,我无法提供网络链接或实际文件。我试图创造一个小提琴,但无法让它发挥作用。我对此有点新意,所以我道歉。如果你无法帮助我,我理解。我真的只是在寻找一些尝试的建议。
那就是说,这是我正在使用的html的粗略草图:
<nav role="navigation" class="menu main-menu”>
<span class="menu-switch">MAIN MENU</span>
<ul>
<li>
<a href=“#home”>Home</a>
</li>
<li>
<a href=“#about”>About</a>
</li>
<li>
<a href=“#contact”>Contact</a>
</li>
</ul>
</nav>
正在使用toggleClass函数关闭和打开菜单。
$('span.menu-switch' ).click(function(){
$(this).toggleClass('open');
});
'open'类指的是下拉列表的CSS样式。
我尝试在另一个页面上应用toggleClass,如下所示:
$('li a#home' ).click(function(){
$(this).toggleClass('open');
});
我的理由是,在其他一个页面链接上再次单击toggleClass会删除“open”类,从而关闭菜单。我尝试过这方面的变化,比如玩不同的选择器,但似乎没有什么对我有用。如果我能提供任何其他有用的信息,请告诉我。我感谢任何建设性的建议。非常感谢您的宝贵时间。
问题已解决。我让它像这样工作:
$('li a').on('click', function() {
$('span.menu-switch').removeClass('open');
});
答案 0 :(得分:0)
<span class="menu"></span>
<div class="top-menu">
<ul>
<li><a class="active" href="index.html">Naslovna</a></li>
<li><a href="cenovnik.html">Cenovnik</a></li>
<li><a href="usluga.html">Usluge</a></li>
<li><a href="prijatelji.html">Prijatelji</a></li>
<li><a href="http://potrcko.net/magazin">Magazin</a></li>
<li><a href="http://potrcko.net/kuvar">Kuvar</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function(event) {
$( ".top-menu" ).slideToggle( "slow", function() {
// Animation complete.
});
});
</script>