0

当点击它们的相对链接时，我有 3 个 div 会切换。当一个 div 被切换并且另一个已经处于活动状态时，它会替换“previous”：

<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 被切换时，页面向上移动。如何“阻止”页面的位置？

4

2 回答 2

0

所以毕竟我操纵了大量的 JS 代码来提防你的回调地狱。毕竟你应该为元素使用类。很难查看您的代码。但结果如下：

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);
});
于 2013-10-25T23:02:25.527 回答
0

1）您需要将 div 中的类名从“toggle”更改为“close”等其他名称，然后添加：（参见示例）

  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);
    });
  });
});
于 2013-10-25T22:14:10.023 回答