Jquery切换不在移动设备上切换类

我在这里有一个网站: http://annapiotrowski.com/ 我有一个菜单选项,标记为服务,这是下拉菜单,代码如下:

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

在mobile上,你应该可以点击服务,它会展开菜单并在下拉菜单中显示项目,我使用这个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 );

还是没用。