jQuery - 点击隐藏目标和其他DIV，然后滚动到目标DIV

我在这一个上做了功课，并找到了不同部分的解决方案，但出乎意料地没有找到整体解决方案的答案。期望的行为：jQuery - 点击隐藏目标和其他DIV，然后滚动到目标DIV

我有四个图像，每个都有它自己的隐藏div部分。点击触发器图像关闭其他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>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <div id="div_2"> Content of Div 2 Here </div> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <div id="div_3"> Content of Div 3 Here </div> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <div id="div_4"> Content of Div 4 Here </div> 
</div> 
</body> 
</html>

你输入非常感谢！

工作演示在这里：http://jsfiddle.net/KillerDesigner/1uybywum/6/

编辑：我忘了提，四个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

来源

2014-10-09 KillerDesigner

没有时间给出全面回复，但我认为你想重新考虑一下你的方法。点击时，你应该在cliked元素上设置一个类，可能是“.active”。然后，如果您点击其他地方，请清除所有“.active”并隐藏它们。你也不应该有这些明确的“当我点击”1“，隐藏”2“，”3“，”4“等 - 它应该是通用的，以便所有”.item“div（或同样）对不起，如果这是一个有点散漫，但你应该只有几个方法在那里。 – Jonathan 2014-10-09 01:11:21

谢谢乔纳森。我明白你要去哪里，带领我进入一个新的方向。报告进度 – KillerDesigner 2014-10-09 03:22:11

Jonathan，再次感谢我重构了代码，虽然它确实更清晰，但仍然无法在同一图像上点击第二次以关闭它的目标div。http://jsfiddle.net/KillerDesigner/1uybywum/8/ – KillerDesigner 2014-10-09 16:38:24

我认为这些方针的东西应该有所帮助：

$(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(); 
    }); 
});

的jsfiddle： http://jsfiddle.net/2ppna9b2/

多一点与幻灯片功能：

$(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); 
    } 
}); 
});

http://jsfiddle.net/zss9nzgz/

来源

2014-10-09 23:06:08 Jonathan

哇！甜！我非常接近。我有逻辑，但无法弄清楚如何写执行逻辑的代码。谢谢乔纳森。 – KillerDesigner 2014-10-10 00:40:27

没问题。欢迎来到StackOverflow！ – Jonathan 2014-10-10 01:05:30

谢谢！我不想磨损我的焦点，但是..我希望它在活动时滚动，所以我添加了这个：http://jsfiddle.net/KillerDesigner/u5xnc7fL/5/但是，它在活动时滚动，何时：不。我尝试了一个if条件，只是不理解逻辑：http://jsfiddle.net/2ppna9b2/。你可以提供一个更多的见解，让我把它放在床上？这是四天我永远不会回来！大声笑;） – KillerDesigner 2014-10-10 15:22:26

jQuery - 点击隐藏目标和其他DIV，然后滚动到目标DIV

回答

相关问题