Question

我在这里有这个网站：http://annapiotrowski.com/，我有一个标签为Services的菜单选项，它是下拉菜单，其代码如下：

<li class="dropdown menu-services"><a class="dropdown-toggle" href="#" data-toggle="dropdown" data-target="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
    <li class="menu-online"><a href="http://annapiotrowski.com/online-health-coaching/">Online</a></li>
    <li class="dropdown menu-in-person"><a href="#">In Person</a>
<ul class="dropdown-menu">
        <li class="menu-classes"><a href="http://annapiotrowski.com/classes/">Classes</a></li>
        <li class="menu-corporate-wellness"><a href="http://annapiotrowski.com/corporate-wellness/">Corporate Wellness</a></li>
    </ul>
</li>
</ul>
</li>

在移动设备上，您应该能够单击“服务”，它将展开菜单并显示下拉菜单中的项目，我正在使用此jquery对其进行切换：

<script>

(function($) {

    $(document).ready(function(){

        var newWindowWidth = $(window).width();
        if (newWindowWidth < 768) {

        $(".dropdown").on("click", function() {

        $(".dropdown").toggleClass("open");


        });

        }

    });

})( jQuery );

</script>

当站点位于页面顶部时，我可以单击“服务”菜单项，然后在下拉菜单中查看这些项。

但是，如果我向下滚动一点并尝试在页面中间执行该操作，则它根本不起作用:(当我单击“服务”时，什么都没有发生。我在做什么错了？

我已经尝试过了：

(function($) {

    $(document).ready(function(){

        var newWindowWidth = $(window).width();
        if (newWindowWidth < 768) {

        $(".dropdown").on("click", function() {

        $(".dropdown").toggleClass("open");


        });

        $(".dropdown").off("click").on("click", function() { $(".dropdown").toggleClass("open"); });

        }

    });

})( jQuery );

仍然无效。

Answer 1

您应在点击处理程序中使用“上下文”（此）来确定点击事件的目标。请使用以下代码替换您的点击处理程序，它应该可以正常工作。我已经在您的网站上对其进行了验证。

 $(".dropdown").off("click").on("click", function() {
    $(this).toggleClass("open"); 
    $(this).find(".dropdown").toggleClass("open");
 });

Answer 2

假设这是在使用移动设备时的情况，那么问题是因为DOM上有2个菜单元素。

如果您位于页面顶部，请单击“服务”菜单项（它应该可以工作）并保持打开状态，然后向下滚动，现在应该可以在视图中看到第二个菜单元素。

您只需要调整js即可处理第二个菜单。

jQuery Toggle不切换移动设备上的类

2 个答案: