jQuery-单击以隐藏目标和其他DIV，并滚动到目标DIV
我做了这方面的家庭作业，找到了不同部分的解决方案，但令人惊讶的是没有找到整体解决方案的答案。期望的行为： 我有四张图片，每一张都有自己的隐藏分区。单击触发器映像关闭其他div，打开目标div，然后滚动到该div。如果目标div打开，单击触发器映像将关闭其目标div（这就是我失败的地方） 多亏了我在这里读了几个小时，经历了很多考验和磨难，虽然它可能不是最干净或最有效的代码块，但我已经具备了除自动关闭之外的所有行为（我可以关闭其他div并滚动到目标，但是，当我单击其触发器时，我无法关闭目标div） 到目前为止，我得到的是：jQuery-单击以隐藏目标和其他DIV，并滚动到目标DIV,jquery,Jquery,我做了这方面的家庭作业，找到了不同部分的解决方案，但令人惊讶的是没有找到整体解决方案的答案。期望的行为： 我有四张图片，每一张都有自己的隐藏分区。单击触发器映像关闭其他div，打开目标div，然后滚动到该div。如果目标div打开，单击触发器映像将关闭其目标div（这就是我失败的地方） 多亏了我在这里读了几个小时，经历了很多考验和磨难，虽然它可能不是最干净或最有效的代码块，但我已经具备了除自动关闭之外的所有行为（我可以关闭其他div并滚动到目标，但是，当我单击其触发器时，我无法关闭目标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>
我认为以下几点应该会有所帮助：
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#divs_container div").removeClass("active");
$("#divs_container #div_"+id[1]).addClass("active");
$("#divs_container div:not(.active)").slideUp();
$("#divs_container div.active").slideToggle();
});
});
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#divs_container div").removeClass("active");
$("#divs_container #div_"+id[1]).addClass("active");
$("#divs_container div:not(.active)").slideUp();
// if it's already open:
// remove class and close it
if($("#divs_container #div_"+id[1]).hasClass("open")){
$("#divs_container #div_"+id[1]).removeClass("open").slideUp();
}
// if it's not open:
// close any open ones
// remove the .open class
// add .open class to target, open it, and scroll to
else{
$("#divs_container .open").slideUp().removeClass("open");
$("#divs_container #div_"+id[1]).addClass("open").slideDown();
$('body,html #divs_container #div_"+id[1]').animate({
scrollTop: $("#div_"+id[1]).offset().top
}, 800);
}
});
});
没有时间给出完整的答复，但我认为您需要重新思考一下您的方法。单击时，您应该在被剪切的元素上设置一个类，可能是“.active”。然后，如果单击其他位置，请清除所有“.active”并隐藏它们。当我单击“1”，隐藏“2”、“3”、“4”等时，您也不应该有这些显式的“.item”div（或者类似地）受到影响。很抱歉，如果这有点杂乱无章，但你应该只有几个方法。谢谢乔纳森。我知道你要做什么，引导我进入一个新的方向。我会回到这里报告进度。乔纳森，再次感谢。我按照建议重构了代码。虽然它确实更干净，但我仍然无法获得second点击同一张图片，关闭它的目标分区。滚动：Jonathan，根据你的输入，我找到了一个新的方法，但我正在努力解决这个问题（见上面的主编辑）.哇！太好了！我很接近了。我有逻辑，但不知道如何编写代码来执行逻辑。谢谢乔纳森。没问题。欢迎使用StackOverflow！谢谢！我不想耗尽我的wecome，但是..我希望它在活动时滚动，所以我添加了以下内容：但是，它在活动时滚动，在不活动时滚动。我尝试了if condition，只是不理解逻辑：。你能再给我一个见解，让我把它放在床上吗？那四天我再也回不来了！哈哈；）没关系。我明白了。再次感谢你的指导和帮助！
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#divs_container div").removeClass("active");
$("#divs_container #div_"+id[1]).addClass("active");
$("#divs_container div:not(.active)").slideUp();
// if it's already open:
// remove class and close it
if($("#divs_container #div_"+id[1]).hasClass("open")){
$("#divs_container #div_"+id[1]).removeClass("open").slideUp();
}
// if it's not open:
// close any open ones
// remove the .open class
// add .open class to target, open it, and scroll to
else{
$("#divs_container .open").slideUp().removeClass("open");
$("#divs_container #div_"+id[1]).addClass("open").slideDown();
$('body,html #divs_container #div_"+id[1]').animate({
scrollTop: $("#div_"+id[1]).offset().top
}, 800);
}
});
});