多個divs滑動，如何隱藏所有關閉按鈕？

Question

我有3個divs，當它們的相對鏈接被點擊時切換。當一個div被觸發，另一種是已經激活，它取代了「前一個」：

<script> 
jQuery(document).ready(function(){ 
    jQuery(".toggleddivs").hide(); 
    jQuery('.togglelink').click(function(){ 
    jQuery(".toggleddivs").hide(); 
    jQuery("#"+jQuery(this).data('target')).slideToggle(); 
    }); 
}); 
</script> 

<a class="togglelink" data-target="div1">togglelink1</a> 
<a class="togglelink" data-target="div2">togglelink2</a> 
<a class="togglelink" data-target="div3">togglelink3</a> 

<div class="toggleddivs" id="div1">CONTENT_DIV1 <a class="toggle" data-target="div1">CLOSE</a></div> 
<div class="toggleddivs" id="div2">CONTENT_DIV2 <a class="toggle" data-target="div2">CLOSE</a></div> 
<div class="toggleddivs" id="div3">CONTENT_DIV3 <a class="toggle" data-target="div3">CLOSE</a></div> 

DEMO（是這樣的，我活的網站）：http://jsfiddle.net/RKVY7/

它工作正常，但

1）我不知道如何使關閉按鈕的工作（看演示）

2）當div切換頁面向上移動。我怎樣才能「阻止」頁面的位置？

Answer 1

1）您將需要從「切換」你的div更改類名瓦特/別的東西，如「關閉」的情況下，再補充一點：（見example）

jQuery('.close').click(function(){ 
    jQuery(".comefareper").slideUp("slow", function() { 
     $(this).hide(); 
    }); 
    }); 

2 ）你需要你的代碼運行前保存當前的滾動以及一旦完成將其設置回保存位置：

jQuery(document).ready(function(){ 
    jQuery(".comefareper").hide(); 

    var currentScrollTop = $(window).scrollTop(); 

    jQuery('.toggle').click(function(){ 
    jQuery(".comefareper").hide(); 
    jQuery("#"+jQuery(this).data('target')).slideToggle(); 
    $(window).scrollTop(currentScrollTop); 
    }); 

    jQuery('.close').click(function(){ 
    jQuery(".comefareper").slideUp("slow", function() { 
     $(this).hide(); 
     $(window).scrollTop(currentScrollTop); 
    }); 
    }); 
}); 

Answer 2

所以，畢竟我操縱大量的JS代碼從callback-hell提防你。畢竟你應該使用類的元素。很難查看你的代碼。但繼承人的結果：

jsfiddle (http://jsfiddle.net/RKVY7/7/)

HTML

<a class="togglelink" data-target="div1">togglelink1</a> 
<a class="togglelink" data-target="div2">togglelink2</a> 
<a class="togglelink" data-target="div3">togglelink3</a> 
<div class="container"> 
    <div class="toggleddivs" id="div1">CONTENT_DIV1 <a class="toggle" data-target="div1">CLOSE</a></div> 
    <div class="toggleddivs" id="div2">CONTENT_DIV2 <a class="toggle" data-target="div2">CLOSE</a></div> 
    <div class="toggleddivs" id="div3">CONTENT_DIV3 <a class="toggle" data-target="div3">CLOSE</a></div> 
</div> 

CSS（用於.container）

.container { 
    display: inline-block; 
    padding: 0; 
    margin : 0; 
} 

JS

jQuery(document).ready(function(){ 

    // INT 
    // the height of the highest one 
    var highestcomefareper = 0; 

    // get highest comefareper so it will not scroll up. 
    var _gethighestcomefareper = function() { 
     var _height = jQuery(this).height(); 
     if(highestcomefareper<_height) { 
      highestcomefareper = _height; 
     } 
    }; 

    // It's not a "real toggle". Just close all and slide down the one 
    var _togglecomefareper = function(){ 
     var _target = jQuery(this).data('target'); 
     jQuery(".comefareper").hide(); 
     jQuery("#"+_target).slideDown(); 
    }; 

    // close the nearest element with the class "comefareper". So don't use it in these boxes again 
    var _closecomefareper = function() { 
     jQuery(this).closest('.comefareper').slideUp(); 
    }; 

    // Get highest comefareper 
    jQuery(".comefareper").each(_gethighestcomefareper); 

    // Assign height to the container. (Prevents page from up-scrolling on close) 
    jQuery(".container").css("min-height", highestcomefareper + "px"); 

    // Hide All 
    jQuery(".comefareper").hide(); 

    // Assign functions to the buttons 
    jQuery('.toggle').click(_togglecomefareper); 
    jQuery(".close").click(_closecomefareper); 
});