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

【问题标题】：Problems closing mobile menu with toggleClass使用 toggleClass 关闭移动菜单时出现问题
【发布时间】：2015-02-02 16:58:09
【问题描述】：

我正在尝试解决移动菜单的问题。这不是我创建的网站，所以我对开发者的代码有点陌生。我认为这个问题应该很容易解决，但我不能完全确定它。基本上，当您单击主菜单按钮时，会出现一个下拉菜单。它会一直保持到您第二次单击主菜单。理想情况下，我希望在单击菜单中的其他页面之一时关闭菜单。也就是说，点击菜单会打开下拉菜单，然后点击“主页”或“关于”会使菜单消失。

很遗憾，我无法提供网络链接或实际文件。我试图创建一个小提琴，但无法让它工作。我对此有点陌生，所以我很抱歉。如果你不能帮助我，我理解。我真的只是在寻找一些尝试的建议。

也就是说，这是我正在使用的 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 会删除“打开”类，从而关闭菜单。我已经尝试过这方面的变化，例如使用不同的选择器，但似乎没有什么对我有用。如果我能提供任何其他有用的信息，请告诉我。我感谢任何建设性的建议。非常感谢您的宝贵时间。

问题已解决。我让它像这样工作：

$('li a').on('click', function() {
       $('span.menu-switch').removeClass('open');
    });

【问题讨论】：

问题已解决。我让它像这样工作：

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

【解决方案1】：

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

【讨论】：