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

我有一个幻灯片布局，可以按我想要的方式工作。我不知道如何在单击时将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/

最佳答案

我建议您只使用一个类而不是两个类。代替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添加/删除类的开销。