0
我有两个单独的div在我正在显示的网站上，当用户点击一个链接（每个div都有链接）时隐藏。第二个div和链接是昨天添加的。当只有一个div和链接时，没有问题。jquery .show（）多个“位置：固定”divs问题
我遇到的问题是，当我点击链接显示第二个div没有任何反应。但是，当我点击链接显示第一个div时，两者都显示出来。我尝试改变标记的顺序，并且当第二个div位于标记中的第一个div之前时，会发生相反的情况 - 第一个div不会在其链接被点击时显示，并且在第二个链接被点击时显示。
由于这两个div都使用固定位置，并从屏幕右边缘滑入，我认为重叠导致div不显示。但我增加了divs之间的空间以避免重叠，问题仍然存在。更新：我也测试过让其中一个面板固定在屏幕左侧，完全排除了问题原因的重叠，但问题仍然存在。
是否有任何类型的参数或回调函数，我可以发送到show函数强制jQuery显示一个元素？
任何帮助将非常感激。
这里是JavaScript：
$(document).ready(function(){
// Initialize Contact Us panel
$('#contacton').css('position', 'fixed');
$('#contacton').css('bottom', '60px');
$('#contacton').css('right', '0');
$('#contacton').css('overflow', 'visible');
$('#contacton').hide();
$('#contactoff').show();
var contacting = false;
//Initialize Newsletter Subscription panel
$('#subscribeon').css('position', 'fixed');
$('#subscribeon').css('bottom', '270px');
$('#subscribeon').css('right', '0');
$('#subscribeon').css('overflow', 'visible');
$('#subscribeon').hide();
$('#subscribeoff').show();
var subscribing = false;
// Expand Newsletter Subscription panel
$('#subscribeoff').click(function() {
if (subscribing) {
// Error - this should not happen as tab is hidden
} else {
subscribing = true;
$('#subscribeoff').hide();
$('#subscribeon').show('fast');
return false;
}
});
// Collapse Newsletter Subscription panel
$('#subscribeontab').click(function() {
if (!subscribing) {
// Error - this should not happen as tab is hidden
} else {
subscribing = false;
$('#subscribeon').hide('fast');
$('#subscribeoff').show();
return false;
}
});
// Collapse Contact Us panel
$('#contactontab').click(function() {
if (!contacting) {
// Error - this should not happen as tab is hidden
} else {
contacting = false;
$('#contacton').hide('fast');
$('#contactoff').show();
return false;
}
});
// Expand Contact Us panel
$('#contactoff').click(function() {
if (contacting) {
// Error - this should not happen as tab is hidden
} else {
contacting = true;
$('#contactoff').hide();
$('#contacton').show('fast');
return false;
}
});
});
的标记为这些部分位于所述主体部分的最末端。下面是标记：
<body>
<div id="header_section">
...
</div>
<div id="nav_menu">
..
</div>
<div id="body_wrap">
...
</div>
<div id="footer">
...
</div>
<div id="subscribeoff">
<a title="Subscribe to our FREE Newsletter" href="#"><img id="subscribeimg" src="/Epic/Boxes/subscribe-free-real-estate-newsletter-off.png" width="30" height="55" alt="Epic Properties Real Estate Newsletter" /></a>
</div>
<div id="contactoff">
<a title="Open Contact Us Panel" href="#"><img id="contactimg" src="/Epic/Boxes/contactoff.png" width="30" height="100" alt="Contact Us" /></a>
</div>
<div id="subscribeon">
<div id="subscribeformwrap">
<div id="subscribeinfo">
<p class="subscribetext">Sign up for the Epic Newsletter for the latest trends in the Valley's luxury real estate market.</p>
<p class="subscribetext" id="subscribelastp">If you are a member of Epic Properties you can subscribe to the Epic Newsletter by accessing your account.</p>
</div> <!-- end subscribeinfo -->
<div id="subscribeform">
<form id="newsletterform" name="newsletterform" method="post" action="/">
<fieldset class="subscribefields">
<label for="fname">FIRST NAME</label>
<input type="text" id="fname" />
</fieldset>
<fieldset class="subscribefields">
<label for="lname">LAST NAME:</label>
<input type="text" id="lname" />
</fieldset>
<fieldset class="subscribefields">
<label for="email">E-MAIL:</label>
<input type="text" id="email" />
</fieldset>
<fieldset class="subscribefields" id="subscribebtn">
<input type="submit" name="send" id="subscribebutton" value="Sign Up" />
</fieldset>
</form>
</div> <!-- end subscribeform -->
<div id="subscribeontab">
<a title="Close Newsletter Panel" href="#"><img id="subscloseimg" src="/Epic/Boxes/subscloseoff.png" width="30" height="55" alt="Close Newsletter Panel" /></a>
</div> <!-- end subscribeontab -->
</div> <!-- end subscribeon -->
<div id="contacton">
<div id="contactformwrap">
<div id="contactinfo">
<h5 class="contacttitle">Contact Us</h5>
<p class="contacttype">Phone:</p>
<p class="contacttext">000.000.0000</p>
<p class="contacttype">Fax:</p>
<p class="contacttext">000.000.0000</p>
<p class="contacttext" id="vcard"><a title="Epic Properties vCard" href="#">Download our vCard</a></p>
</div> <!-- end contactinfo -->
<div id="contactform">
<h5 class="contacttitle" id="msgtitle">Send a Message</h5>
<form id="messageform" name="messageform" method="post" action="/">
<fieldset class="contactfields">
<label for="name">NAME:</label>
<input type="text" id="name" />
</fieldset>
<fieldset class="contactfields">
<label for="email">E-MAIL:</label>
<input type="text" id="email" />
</fieldset>
<fieldset class="contactfields">
<label for="email">MESSAGE:</label>
</fieldset>
<textarea id="contactmessage"></textarea>
<fieldset class="contactfields" id="sendmsgbtn">
<input type="submit" name="send" id="sendmsgbutton" value="Send Message" />
</fieldset>
</form>
</div> <!-- end contactform -->
<div id="contactontab">
<a title="Close Contact Us Panel" href="#"><img id="closeimg" src="/Epic/Boxes/closeoff.png" width="30" height="100" alt="Close Contact Us Panel" /></a>
</div> <!-- end contactontab -->
</div> <!-- end contacton -->
</body>
</html>
最后这里是CSS：
#subscribeoff {
display: none;
position: fixed;
bottom: 270px;
right: 0;
}
#subscribeoff a img {
border: none;
}
#subscribeon {
display: block;
position: fixed;
bottom: 270px;
right: 0;
background: #000;
background: rgba(0, 0, 0, .8);
}
#subscribeontab {
position: absolute;
bottom: 0;
left: -30px;
}
#subscribeontab a img {
border: none;
}
你是对的。我还需要关闭contactformwrap div。谢谢大卫！ – pocketazes 2011-01-29 22:11:40