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

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

本文关键字：单击 选项 任何部 隐藏 网站      更新时间：2023-09-26

我在此页面上创建了一个支持选项卡（右侧的那个）：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();
});

提前感谢！干杯！

查看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||{});

。

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

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
});
相关文章：