У меня есть два отдельных элемента на сайте, над которым я работаю, и прячемся, когда пользователь нажимает на ссылку (для каждого элемента есть ссылка).Второй div и ссылка были добавлены вчера.Когда был только один div и ссылка, проблем не было.
Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на ссылку, чтобы показать второй div, ничего не происходит.Однако, когда я нажимаю на ссылку, чтобы показать первый div, оба появляются.Я попытался изменить порядок разметки, и когда второй div находится перед первым div в разметке, происходит обратное - первый div не отображается при нажатии на его ссылку, и оба отображаются при нажатии второй ссылки.
Поскольку оба этих блока используют фиксированное позиционирование и скользят от правого края экрана, я подумал, что перекрытие заставляет блок не отображаться.Но я увеличил расстояние между элементами, чтобы избежать дублирования, и проблема остается.ОБНОВЛЕНИЕ: я также проверил, чтобы одна из панелей была зафиксирована в левой части экрана, чтобы полностью исключить совпадение с причиной проблемы, но проблема все еще возникла.
Есть ли какой-либо тип параметраили функция обратного вызова, которую я могу отправить в функцию 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;
}