jquery - 如何删除类单击内部 div

Question

我有两个div。单击一个时，它会打开，而另一个则关闭。我希望能够通过单击另一个 div 或单击“[x]”来关闭当前打开的 div。我的第一部分工作正常，但当前的 div 只切换类而不是在单击“[x]”后关闭。

$("main-element .close").click(function() {

        if( $('.main-element').hasClass("open") ) {
            $('.main-element').removeClass("open").addClass("closed");
        } 
});


$(".main-element").click(function() {

        if( $(this).hasClass("open") ) {
            $(this).removeClass("open").addClass("closed");
        } else {
            $(this).siblings().removeClass("open").addClass("closed"); 
            $(this).removeClass("closed").addClass("open");
        }

});

我添加了一个jsFiddle来帮助更好地解释它。

Answer 1

切换类方法怎么样？我唯一能说这没有完成的是，您仍然可以通过单击图像来关闭框。（不是 .main-element 背景 - 而是图像）〜我喜欢反正。这简化了很多事情。这是假设您删除所有其他 jQuery 并从 CSS 中删除不再需要的任何类的代码。

jQuery

$(".main-element img, .close").click(function() {
    $(this).closest('.main-element').toggleClass("open");
});

CSS

.main-element {
  width:200px;
  height:200px;
}

.open   {
  height:440px;
  width:440px;
}

Answer 2

在这里试试这个代码：http: //jsfiddle.net/kuYRh/56/

关键是e.stopPropagation()因为 [x] 在div