我在浏览器窗口的一侧有一个选项卡，单击该选项卡时使用 jquery 将其滑入并显示它。问题是因为我有绝对定位，它溢出了身体，我似乎无法停止。当它被 jQuery 拉入时，它不再溢出。只有当它被隐藏时。
JS：
$(tabs).click(function(event) {
event.preventDefault();
var block = '#block-webform-client-block-12';
if($(tabs).hasClass("isDown")) {
$(block).animate({ right: '+=380'}, 500 ),
//$(block).css({ position: 'absolute' });
$(tabs).removeClass("isDown");
$('.block-webform .quote-tab.open').hide();
$('.block-webform .quote-tab.close').show();
} else {
$(block).animate({ right: '-=380' }, 500 )
//$(block).css({ position: 'fixed'});
$(tabs).addClass("isDown");
$('.block-webform .quote-tab.open').show();
$('.block-webform .quote-tab.close').hide();
}
return false;
});
CSS：
#block-webform-client-block-12 {
position: absolute;
top: 20%;
right: -380px;
background: $button-color;
padding: 15px;
width: 350px;
color: white;
z-index: 99;
@include zen-grid-container();
.quote-tab {
position: absolute;
top: 0;
left: -46px;
}
HTML：
<div id="block-webform-client-block-12" class="block block-webform contextual-links-region last even">
<h2 class="block-title">
Get a Quote
</h2>
<article class="node-12 node node-webform node-promoted contextual-links-region view-mode-full node-by-viewer clearfix" about="/get-quote" typeof="sioc:Item foaf:Document">
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<img src="/sites/domain.com/files/close-quote-tab.png" class="quote-tab close"> <img src="/sites/domain.com/files/open-quote-tab.png" class="quote-tab open">
<p>
Fill out this form to request a quote or set up an appointment. For more information, <strong>call 123-456-7890</strong>.
</p>
</div>
</div>
</div>
<form class="webform-client-form" enctype="multipart/form-data" action="/get-quote" method="post" id="webform-client-form-12" accept-charset="UTF-8">
...form_components...
截屏
我想这样做，以便当表单关闭屏幕时仅显示选项卡，您无法滚动查看表单的其余部分