Question

我有一个简单的滑块，我在点击事件中打开/关闭。

$('#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在滑动后会立即滑下来。

Answer 1

你可以使用这个功能

'   '

点击事件中的

// 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();
        }
  }

简单地说这个函数表示如果元素不是目标就行动

Working Demo

当您使用$(document).click(function (e) { actionwindowclick(e , '#tab1-content' , function(){ // do action here }); });时，您需要event.stopPropagation()

所以例如

$(document).click(...

Working Example

单击页面上的任意位置时切换div内容

1 个答案: