Я сделал домашнее задание на этом и нашел решения для разных частей, но на удивление не нашел ответа на общее решение. Желаемое поведение:jQuery - Нажмите, чтобы скрыть цель и другие DIV, и прокрутите до пункта DIV
У меня есть четыре изображения, каждый из которых имеет собственную секцию скрытого div. Нажатие на изображение триггера закрывает другие divs, открывает целевой div, затем прокручивается до этого div. Если целевой div открыт, щелчок на изображении триггера закрывает свой целевой div (это то, где я потерпел неудачу).
Благодаря моим часам чтения здесь и множеству испытаний и несчастий, хотя это может быть не самый чистый или эффективный кодовый блок, у меня есть все поведение, кроме самозакрывания (я могу закрыть другие divs и прокрутить к цели, однако, я не могу закрыть целевой div, когда я нажимаю на его триггер).
Вот что у меня до сих пор:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Show/Hide & Scroll to Multiple DIVs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div_1").slideUp('fast');
$("#div_2").slideUp('fast');
$("#div_3").slideUp('fast');
$("#div_4").slideUp('fast');
$("#show_trigger_1").click(function() {
if ($("#div_1").is(':hidden')) {
$("#div_2").slideUp('fast');
$("#div_3").slideUp('fast');
$("#div_4").slideUp('fast');
$("body,html").animate({
scrollTop: $("#div_1").offset().top
}, 100);
$("#div_1").slideToggle('fast');
}
});
$("#show_trigger_2").click(function() {
var wasVisible = $("#div_2").is(':visible');
$('[id^=element]:visible').stop().slideUp('fast');
if (!wasVisible) {
$("#div_1").slideUp('fast');
$("#div_3").slideUp('fast');
$("#div_4").slideUp('fast');
$("#div_2").slideDown('fast');
$("body,html").animate({
scrollTop: $("#div_2").offset().top
}, 200);
}
});
$("#show_trigger_3").click(function() {
if ($("#div_3").is(':hidden')) {
$("#div_1").slideUp('fast');
$("#div_2").slideUp('fast');
$("#div_4").slideUp('fast');
$("#div_3").slideDown('fast');
}
$("body,html").animate({
scrollTop: $("#div_3").offset().top
}, 400);
});
$("#show_trigger_4").click(function() {
if ($("#div_4").is(':hidden')) {
$("#div_1").slideUp('fast');
$("#div_2").slideUp('fast');
$("#div_3").slideUp('fast');
$("#div_4").slideDown('fast');
}
$("body,html").animate({
scrollTop: $("#div_4").offset().top
}, 600);
});
});
</script>
<style type="text/css">
#containers-wrap {
width: 650px;
height: auto;
padding-left: 30px;
}
#containers-wrap div {
display: none;
}
</style>
</head>
<body>
<div id="nav"> <a id="show_trigger_1"><img src="http://placehold.it/125&text=Image+1"></a> <a id="show_trigger_2"><img src="http://placehold.it/125&text=Image+2"></a> <a id="show_trigger_3"><img src="http://placehold.it/125&text=Image+3"></a> <a id="show_trigger_4"><img src="http://placehold.it/125&text=Image+4"></a> </div>
<div id="containers-wrap">
<div id="div_1"> Content of Div 1 Here </div>
<p> </p>
<p> </p>
<p> </p>
<div id="div_2"> Content of Div 2 Here </div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="div_3"> Content of Div 3 Here </div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="div_4"> Content of Div 4 Here </div>
</div>
</body>
</html>
Ваш вклад очень ценится!
Работа демо здесь: http://jsfiddle.net/KillerDesigner/1uybywum/6/
EDIT: Я забыл упомянуть, что каждый из четырех разделов Jquery моя попытка сделать нужную работу поведения. Не стесняйтесь осуждать меня - я NOOB.
onclick
create var with class and id (a.class#id)
split id at div_ so that I can target numbered ids
if class.id of clicked element is open
set its class to close
then close all elements with close classes
if class.id of clicked element is close
set its class to open
open class.div_
scroll to it
end
не успевают дать полный отклик, но я думаю, что вы хотите немного переосмыслить свой подход. При щелчке вы должны установить класс на клик-элемент, возможно, «.active». Затем, если вы щелкните в другом месте, очистите все «.active» и скройте их. У вас также не должно быть этих явных «когда я нажимаю« 1 », скрываю« 2 »,« 3 »,« 4 »и т. Д. - он должен быть общим, чтобы все« .item »divs (или аналогичные) Извините, если это немного странно, но у вас должно быть только несколько методов. – Jonathan
Спасибо Джонатан. Я вижу, где вы собираетесь с этим, введя меня в новое направление. – KillerDesigner
Jonathan, еще раз спасибо. Я реорганизовал код, как было предложено. Хотя он, безусловно, чище, я все равно не могу получить второй клик на том же изображении, чтобы закрыть его целевой div. http://jsfiddle.net/KillerDesigner/1uybywum/8/ – KillerDesigner