使用toggleClass关闭移动菜单时出现问题

时间:2015-02-02 16:58:09

标签: jquery mobile drop-down-menu menu toggleclass

我正在尝试使用移动菜单解决问题。这不是我创建的网站,所以我对开发人员的代码有点不熟悉。我认为问题应该是一个容易解决的问题,但我不能完全解决它。基本上,当您单击“主菜单”按钮时,会出现一个下拉菜单。它会保持不变直到您再次单击主菜单。理想情况下,只要点击菜单中的其他页面,菜单就会关闭。换句话说,单击菜单打开下拉菜单,然后单击“主页”或“关于”将使菜单消失。

遗憾的是,我无法提供网络链接或实际文件。我试图创造一个小提琴,但无法让它发挥作用。我对此有点新意,所以我道歉。如果你无法帮助我,我理解。我真的只是在寻找一些尝试的建议。

那就是说,这是我正在使用的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');
    });

1 个答案:

答案 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>