嘗試在單擊其他任何位置後在下拉菜單中刪除類，然後單擊其中的其他任何位置，然後點擊knockout.js

Question

我在淘汰賽中添加了一個類，並且我似乎無法弄清楚如何將該類關閉點擊頁面的其餘部分。這是我的代碼。我嘗試了幾件事情，但無濟於事。當您點擊頁面上的任何其他位置時，我想要移除.nav-menu.cart上的「打開」類。謝謝

self.addProductToCart = function(data) { 
var $productNotification = $(".product-notification"); 
ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description}); 
$productNotification.slideDown(1000).fadeOut(200); 
$(".nav-menu.cart").addClass("open"); 

};

Answer 1

無論何時您需要更改DOM，您都應該嘗試通過敲除數據綁定來完成此操作。大部分可以通過敲除的默認綁定來完成;有些東西需要自定義綁定。

對於第一部分：添加開放類應通過css綁定發生：

data-bind="css: { 'classname' : state }" 

在您的視圖模型，添加一個cartIsOpen觀察到的和openCart方法。

self.isOpen(true); 

和淘汰賽：

data-bind="css: {'open': isOpen }" 

jQuery的線可以被替換爲：現在

self.isOpen = ko.observable(false); 

，您可以通過添加這個數據綁定到其容器元素在視覺上打開你的車會照顧css。

現在，對於（更復雜）第二部分：

聽在容器外的事件是不是淘汰賽的常規click或event結合能做到。所以你必須寫一個自定義綁定。

聽事件外某個元素可能相當棘手;我建議尋找堆棧溢出的一些一般建議。你需要非常小心event.stopPropagation()它的工作。

在下面的例子中，我編寫了一個clickOutside綁定的粗略示例。請注意，這不是一個「完成」的例子：

• 任何點擊您的頁面將觸發closeOnClickOutside方法;你需要找到一種方法來附加偵聽器時isOpen設置爲true，並處置一次它被設置爲false。
• 無論何時您想打開菜單，您都需要明確地停止點擊事件到達文檔。 （在示例中爲cancelBubble）。否則，菜單立即打開和關閉。

var elementContainsChild = function(parent, child) { 
 
    // http://stackoverflow.com/a/2234986/3297291 
 
    var node = child.parentNode; 
 
    while (node !== null) { 
 
    if (node === parent) { 
 
     return true; 
 
    } 
 
    node = node.parentNode; 
 
    } 
 
    return false; 
 
}; 
 

 
ko.bindingHandlers.clickOutside = { 
 
    init: function(element, valueAccessor) { 
 
    var cb = valueAccessor(); 
 
    var closeOnClickOutside = function(e) { 
 
     if (e.target !== element && 
 
      !elementContainsChild(element, e.target)) { 
 
      cb(); 
 
     } 
 
    }; 
 
    
 
    document.addEventListener("click", closeOnClickOutside); 
 
    } 
 
} 
 

 
var vm = { 
 
    isOpen: ko.observable(false) 
 
}; 
 

 
ko.applyBindings(vm);

html, body { height: 100%; background: grey; } 
 
.menu { background: yellow; display: none; } 
 
.menu.open { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<button data-bind="click: isOpen.bind(null, true), clickBubble: false">open menu</button> 
 
<div class="menu" data-bind="css: {'open' : isOpen }, clickOutside: isOpen.bind(null, false)"> 
 
    <ul> 
 
    <li>Menu item</li> 
 
    <li>Menu item</li> 
 
    <li>Menu item</li> 
 
    <li>Menu item</li> 
 
    </ul> 
 
</div>