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

Question

我在此页面（右侧）上创建了一个支持选项卡： http://test88.fccbet.com/

这是我得到标签滑出效果的地方：http://www.building58.com/examples/tabSlideOut.html

现在，如果您点击网页的任何部分，主选项卡就会隐藏。我应该添加什么 js，以便只有在我单击侧边选项卡时它才会隐藏？

请参考此图了解主标签和侧标签。 echosantos.com/tabslideout/tab-desired-outcome.jpg

这些是我用于此支持选项卡的代码：

HTML:

<div id="bannerLeft">
<div class="slide-out-div no-phone no-phone-landscape" style="background-image:url(images/support-tab.png); "><br />
<a href="javascript:supportPop('https://messenger.providesupport.com/messenger/043ddykhqw98l0mslsguhu8w79.html');" id="range-logo">Fccbet</a>
<a class="handle" href="#"></a><div id="close-bottom"><img src="@routes.Assets.at("images/close-chat.jpg")"/>
</div>

CSS:

.slide-out-div {
width: 125px; 
height:392px;
background: url(../images/support-tab.png); }


#range-logo {
background-image:url(../images/support-tab.png);
display:block;
text-indent:-9999px;
width: 125px; 
height:396px;}

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

});

提前致谢！干杯！

Answer 1

查看 jQuery.tabSlideOut 插件代码，您可以在此处看到：

https://gist.github.com/katowulf/2655810#file-jquery-tabslideout-1-3-js-L164-L165

document正在监听回调中隐藏菜单的点击事件。

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

...

然后使用flag判断是否添加监听：

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

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

Hide tab by clicking the tab instead of clicking any part of the website

html

javascript

css

jquery

tabs