页面上有一堆div
元素。
我在其中嵌套了一个 div
。
我希望能够向 click
ed 元素添加一个类,并向子 div 添加 .show()
。
$('.container').on('click', function(){
$(this).toggleClass('red').children('.insideItem').slideToggle();
});
- 我可以点击它,它会掉下来。
- 再次点击,它消失。
所以,现在我需要一些方法来 removeClass()
和 slideUp()
all 在点击事件中的其他方法除了打开的 div 之外的任何地方。当然,我尝试过这样的事情:
$('html').on('click', function(){
$('.container').removeClass('red').children('div').slideUp();
});
好吧,这只是阻止了效果停留在第一位。我已经阅读了有关 event.Propagation()
的内容,但我已经阅读过应该尽可能避免的内容。
我正在努力避免使用任何更多的预构建插件,如 accordion
,因为这应该是一件非常简单的事情,我想知道一个简单的方法来让它工作。
谁能在这个 fiddle 上展示一个快速示例如何解决这个问题?
- 只显示一个事件的 div,如果点击关闭则折叠所有其他的
最佳答案
解决此问题的一种方法是使用以下内容更新您的代码:
1) 防止对正方形的点击冒泡到父元素 2) 确保在任何地方进行新的点击时重置所有方 block 的状态。
$('.container').on('click', function(){
$this = $(this);
$('.container').not($this).removeClass('red').children('div').slideUp();
$this.toggleClass('red').children('div').slideToggle();
return false;
});
在这里查看更新的 JSfiddle:https://jsfiddle.net/pdL0y0xz/
关于javascript - 一次只有一个 Active 类和 Visible Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35590136/