Jquery 滑动切换不起作用

Question

我正在尝试为我的网站创建一个滑动开关。我从另一个来源复制了代码，但它似乎不起作用。我有 src jquery ui 和 jquery。但它不起作用。有什么建议吗？

下面是我的代码:

$(document).ready(function(e) {
    var contactHidden = false;
    $(".contactHider").click(function(){
        var effect = 'slide';
        var opt = { direction: 'right' };
        var duration = 700;
        $('.contactDiv').toggle(effect, opt, duration);
    });
});

CSS:

.contactDiv { 
height: 100%;
width: 300px;
background-color: #414040;
float:right;
right:0;
position:absolute;
z-index:1000;
}

.contactHider{
    height:100%;
    background:#999;
    cursor:pointer;
    width:20px;
    font-weight:700;
    font-family:OpenSansBold;
    float:right;
    margin-right:300px;
    z-index:1335;
    position:absolute;
    right:0;
}

我的代码有什么问题吗？

Answer 1

如果你想按类切换，使用下面的代码并根据你的要求进行调整。将区域放在要切换的 div 下。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

$(function() {
   $( "#DivID" ).click(function() {
  $( "#effect" ).toggleClass( ".className", 1000 );
  });

});