0
サイトに2つの別々のdivがあります。ユーザーがリンクをクリックすると表示と非表示になります（各divにリンクがあります）。昨日、2番目のdivとリンクが追加されました。 divとリンクが1つしかないときは、問題はありませんでした。jquery .show（）multiple "position：fixed" divs issue
私が遭遇している問題は、リンクをクリックして2番目のdivを表示しても何も起こらないということです。しかし、最初のdivを表示するためにリンクをクリックすると、両方が表示されます。マークアップの順序を変更しようとしましたが、マークアップの最初のdivの前に2番目のdivがあると、逆のことが起こります。最初のdivはリンクがクリックされたときに表示されず、2番目のリンクがクリックされたときに両方が表示されます。
これらのdivの両方が固定位置を使用しており、画面の右端からスライドしているため、オーバーラップがdivが表示されない原因と考えました。しかし、重複を避けるためにディビジョン間のスペースを増やし、問題は残っています。更新：私はまた、問題の原因からの重複を完全に排除するために、パネルの1つを画面の左側に固定することをテストしましたが、問題はまだ発生しました。
jQueryに要素を表示させるために、show関数に送ることができるパラメータまたはコールバック関数はありますか？
ご協力いただければ幸いです。ここで
は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;
}
あなたは正しいです（FirebugまたはSafariを使用して）。私もcontactformwrap divを閉じる必要がありました。 Davidに感謝します！ – pocketazes