Jquery 切换系统，在不同位置有两个 div

Question

我想做这个系统:JSFiddle

$(".more").click(function(e) {

    if( $(this).hasClass("open") ) {
        $(this).removeClass("open").addClass("closed");
    } else {
        // if other menus are open remove open class and add closed
        $(this).siblings().removeClass("open").addClass("closed"); 
        $(this).removeClass("closed").addClass("open");
    }

});

但是两个 div 不是一个接一个的。当两个元素放置在两个不同的位置时，我应该在这段代码中更改什么才能使其正常工作？

例如在这种情况下:

<div class="column w50percent">
    <button class="more closed">Demande de devis</button>
</div>
<div class="column w50percent">
    <button class="more closed">Prise de contact</button>
</div>

提前谢谢

Answer 1

不依赖当前元素和其余相关元素之间的位置关系(在本例中为兄弟元素)，而是使用外部引用(更多类)

var $els = $(".more").click(function (e) {
    if (!$(this).hasClass("open")) {
        // if other menus are open remove open class and add closed
        $els.not(this).filter('.open').removeClass("open").addClass("closed");
    }
    $(this).toggleClass("closed open");
});

演示:Fiddle

还使用toggleClass()而不是使用两次添加和删除类

更新:

var $els = $(".more");

if (Modernizr.touch) {
    $els.hammer();
}
var $els = $(".more").on(Modernizr.touch ? 'tap' : 'click', function () {
    if (!$(this).hasClass("open")) {
        $els.not(this).filter('.open').removeClass("open").addClass("closed");
    }
    $(this).toggleClass("closed open");
});