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

回答

相關問題