我有一个简单的 slider ,可以在点击事件时打开/关闭。
$('#tab1-slideout span').click(function () {
manageToggleStateTab1();
});
function manageToggleStateTab1() {
if (tab1ToggleState == 'collapsed') {
$('#tab1-content').slideToggle('slow');
$('#tab1-slideout span').addClass('active');
tab1ToggleState = 'expanded';
});
在页面加载时,我将此 tab1ToggleState 设置为初始值
var tab1ToggleState = 'collapsed';
这很好用,但我想进一步扩展它,以便允许在 #tab1-content
容器 div 之外的任何地方切换点击事件的状态。
我试图在页面上的任何地方连接点击事件,除了带有切换内容的那个
$(document).not($('#tab1-content')).click(function () {
manageToggleStateTab1();
});
但这并没有给我想要的结果,div 向上滑动后立即向下滑动。
最佳答案
你可以使用这个功能
// hide some divs when click on window
function actionwindowclick(e , el , action){
if (!$(el).is(e.target) // if the target of the click isn't the container...
&& $(el).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
在点击事件中
$(document).click(function (e) {
actionwindowclick(e , '#tab1-content' , function(){
// do action here
});
});
这个函数只是说如果元素不是目标就执行操作
当您使用 $(document).click(...
时,您将需要 event.stopPropagation()
例如
$('#tab1-slideout span').click(function (event) {
event.stopPropagation();
manageToggleStateTab1();
});
关于javascript - 单击页面上的任意位置时切换 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34242858/