Question

我在这个上完成了我的作业，找到了不同部分的解决方案，但令人惊讶的是没有找到整体解决方案的答案。期望的行为：

我有四张图片，每张图片都有自己隐藏的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

Answer 1

我认为这些方面应该有所帮助：

$(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/

jQuery - 单击以隐藏目标和其他DIV，并滚动到目标DIV

1 个答案: