jQuery Toggle不切換移動設備上的類

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

您應該在點擊處理程序中使用“上下文”（this）來識別點擊事件的目標。 請使用以下代碼替換您的點擊處理程序，它應該可以正常工作。 我已在您的網站上對其進行了驗證。

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

Answer 2

假設這是在移動設備上的情況，那么問題是因為DOM上有2個菜單元素。

如果您位於頁面頂部，請單擊“服務”菜單項（它應該可以工作）並保持打開狀態，然后向下滾動，您現在應該可以在視圖中看到第二個菜單元素。

您只需要調整您的js即可處理第二個菜單。