javascript - 我不知道如何将切换转换转换为没有动画的隐藏/显示

Question

我有一个按我想要的方式工作的幻灯片版式。我不知道如何将 toggleSlide 更改为简单的点击隐藏显示。我创建了一个容器，其中有两个链接可以在其他容器中滑动。我需要将功能更改为不滑动，而只是在单击时出现和消失。我不知道如何更改功能。

HTML

<div class="modhidden">Here I am !

<!--<a href="#" class="modslide">Update</a>-->

  <a href="#" class="modslide col-xs-12 left-btn btn btn-primary">Update</a>

</div>

<div class="modhidden2">Here I am AGAIN!

<!--<a href="#" class="modslide2">Update</a>-->
  <a href="#" class="modslide2 col-xs-12 left-btn btn btn-primary">Update</a>

</div>

<div class="modleft">Left panel

<a href="#" class="modslide">Show ONE</a>

<a href="#" class="modslide2">The other ONE</a>

</div>

<div class="modclear"></div>

CSS

.modleft, .modhidden, .modhidden2 {
    float: right;
    width: 100%;
    height:350px;
}

.modhidden, .modhidden2 {
    width:100%;
    z-index:2;
    position:absolute;
    right:-1000px;
    background:#f90;
    color:#000;
}

.modleft {
    width:100%;
    float: left;
    height:350px;
    background: pink;
    color: #000;
}

.modclear {
    clear:both;
}

JS

$(document).ready(function(){
    $('.modslide').click(function(){
    var hidden = $('.modhidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"right":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"right":"0px"}, "slow").addClass('visible');
    }
    });

    $('.modslide2').click(function(){
    var hidden2 = $('.modhidden2');
    if (hidden2.hasClass('visible')){
        hidden2.animate({"right":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden2.animate({"right":"0px"}, "slow").addClass('visible');
    }
    });
});

JSFIDDLE

https://jsfiddle.net/galnova/jgyt1svb/

Answer 1

我建议您只使用一个类而不是两个。而不是 modslide 和 modslide2，只需使用 modslide。此外，不要添加/删除类来跟踪状态，而是尝试 jquery 的 toggle() 函数。

<div class="modhidden">Here I am !

<!--<a href="#" class="modslide">Update</a>-->

  <a href="#" class="modslide col-xs-12 left-btn btn btn-primary">Update</a>

</div>

<div class="modhidden">Here I am AGAIN!

<!--<a href="#">Update</a>-->
  <a href="#"  col-xs-12 left-btn btn btn-primary">Update</a>

</div>

<div class="modleft">Left panel

<a href="#" class="modslide">Show ONE</a>

<a href="#" class="modslide">The other ONE</a>

</div>

<div class="modclear"></div>


.modleft, .modhidden {
    float: right;
    width: 100%;
    height:350px;
}

.modhidden {
    width:100%;
    z-index:2;
    visibility: hidden;
    position:absolute;
    background:#f90;
    color:#000;
}

.modleft {
    width:100%;
    float: left;
    height:350px;
    background: pink;
    color: #000;
}

.modclear {
    clear:both;
}

.visible {
    visibility: visible;
 }


$(document).ready(function(){
    $('.modslide').click(function(){
         $(this).toggle(0);
    });
});

似乎这样更容易维护，因为只有一个函数需要更新。此外，性能可能更高(我还没有测试过)，因为您没有从 DOM 中添加/删除类的开销。