Javascript 通过单击选项卡而不是单击网站的任何部分来隐藏选项卡

我在此页面上创建了一个“支持”选项卡（右侧的选项卡）：

这就是我得到标签滑出效果的地方：

现在，如果单击网页的任何部分，主选项卡将隐藏。我应该添加什么js，以便在单击“侧”选项卡时它才会隐藏

请参考此图了解主选项卡和侧选项卡。 echosantos.com/tabslideout/tab-desired-output.jpg

以下是我用于此“支持”选项卡的代码：

HTML:

JAVASCRIPT:

$(function () { 

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle', //class of the element that will become your tab
    pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px', //height of tab image           //Optionally can be set using css
    imageWidth: '40px', //width of tab image            //Optionally can be set using css
    tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
    speed: 300, //speed of animation
    action: 'click', //options: 'click' or 'hover', action to trigger animation
    topPos: '200px', //position from the top/ use if tabLocation is left or right
    leftPos: '20px', //position from left/ use if tabLocation is bottom or top
    fixedPosition: false //options: true makes it stick(fixed position) on scroll
});


$('.slide-out-div > .handle').click();

});

---

提前谢谢！干杯

查看

jQuery.tabSlideOut

插件代码，您可以在这里看到：

文档

正在侦听将菜单隐藏在回调中的单击事件

     $(document).click(function(){
        slideIn();
     });

如果您不想使用此功能，我建议从插件中删除这部分代码

如果您认为将来可能需要此功能，您可以通过在初始化插件时传入的

callerSettings

参数中添加属性，在其周围环绕一个标志

  var settings = $.extend({
     tabHandle: '.handle',
     speed: 300,
     action: 'click',
     tabLocation: 'left',
     topPos: '200px',
     leftPos: '20px',
     fixedPosition: false,
     positioning: 'absolute',
     pathToTabImage: null,
     imageHeight: null,
     imageWidth: null,
     onLoadSlideOut: false,
     tabHandleOffset: 0,
     hideOnDocClick: true //new flag to check for doc click hide 
  }, callerSettings||{});

然后使用该标志检查是否添加侦听器：

if(settings.hideOnDocClick){
  $(document).click(function(){
     slideIn();
  });
}

当您最终初始化插件时，您可以将标志设置为

false

：

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle', //class of the element that will become your tab
    pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px', //height of tab image           //Optionally can be set using css
    imageWidth: '40px', //width of tab image            //Optionally can be set using css
    tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
    speed: 300, //speed of animation
    action: 'click', //options: 'click' or 'hover', action to trigger animation
    topPos: '200px', //position from the top/ use if tabLocation is left or right
    leftPos: '20px', //position from left/ use if tabLocation is bottom or top
    fixedPosition: false, //options: true makes it stick(fixed position) on scroll
    hideOnDocClick: false //set flag to false - menu does NOT hide when user clicks on doc
});

if(settings.hideOnDocClick){
  $(document).click(function(){
     slideIn();
  });
}

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle', //class of the element that will become your tab
    pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px', //height of tab image           //Optionally can be set using css
    imageWidth: '40px', //width of tab image            //Optionally can be set using css
    tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
    speed: 300, //speed of animation
    action: 'click', //options: 'click' or 'hover', action to trigger animation
    topPos: '200px', //position from the top/ use if tabLocation is left or right
    leftPos: '20px', //position from left/ use if tabLocation is bottom or top
    fixedPosition: false, //options: true makes it stick(fixed position) on scroll
    hideOnDocClick: false //set flag to false - menu does NOT hide when user clicks on doc
});