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()代替使用添加＆amp;删除两次课程

更新

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");
});

Answer 2

再次感谢你，Arun P Johny的代码现在运行得很好。为了使其与触摸设备兼容，我使用了带有Hammer的Modernizr。但是如何减少代码中的重复呢？

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

Answer 3

除非我误解了这一点，否则您希望影响的每个项目都有“更多”类。在这种情况下，您可以在大多数情况下使用类名替换$（this）。所以，你的代码将是......

$(".more").click(function(e) {
    $('.more').removeClass("open").addClass("closed");
    $(this).addClass('open');
   }
});

这只是从“more”类的所有项中删除“open”类，然后将“open”类应用于单击的项目。

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

3 个答案: