切换类为切换订阅框jquery

我想切换订阅框的div。我正在设计它的样式，因此它在底部齐平，并且具有负边距以隐藏除顶部之外的所有内容。我想要做的是用一个onclick事件切换父级div的类，我不确定我遇到的问题，我确实有一些错误，我认为我已经设法解决，但是显然缺少即时消息因为它不工作。我不确定什么不幸。下面的代码：切换类为切换订阅框jquery

JS：

var subscribe = document.getElementById('subscribe'); 
subscribe.style.cursor = 'pointer'; 
subscribe.onclick (function raise(){ 
    if (subscribe.hasClass('subscription') === true) { 
    subscribe.toggleClass('raised', 800); 
    } else { 
    subscribe.toggleClass('subscription', 800); 
    }; 
});

HTML：

<div class="subscription" id="subscribe" onclick="raise()"> 
<div class="sub-tab"> 
    + keep in touch 
    </div> 
    <div class="sub-body"> 
    Subscribe to our newsletter to get our latest offers and news. 
    </div> 
</div>

CSS：

.subscription { 
    height: 400px; 
    width: 350px; 
    position: fixed; 
    bottom: 0; 
    margin-bottom: -365px; 
} 
.raise { 
    height: 400px; 
    width: 350px; 
    position: fixed; 
    bottom: 0; 
}

我也许应该补充一点，我收到引发错误是未定义，虽然不是function raise()部分定义它？

来源

2014-02-12 moqa

添加的jsfiddle。 – turnt

@Cygwinnian http://jsfiddle.net/Htunj/ – moqa

值得注意的是，你的类不一样（.raise [css]和.raised [js]）。 –

你分配通过javascript subscribe.onclick以及内嵌...的raise方法的onclick函数内部定义，因此不会在范围上是可见的HTML

取出onclick="raise()"

并更改事件：

subscribe.on('click', function(){

由于您使用jQuery，你不需要getElementById：

$('#subscribe')

此外，=== true是多余的：

if (subscribe.hasClass('subscription')) {

就足够了

来源

2014-02-12 17:47:16 helion3

这很有道理，但没有奏效，这里有一个我做的改变，可能我错过了一些东西： http://jsfiddle.net/Htunj/2/ – moqa

你使用'raised'在CSS中的CSS和'raise'。 'raise'类仍然有'margin-bottom：-345px'。更改这些以及如何通过javascript设置'css'解决了这个问题：http://jsfiddle.net/Htunj/3/ – helion3

此外，'toggleClass'方法不会为其第二个参数采用数字。您可能正在寻找'animate' https://api.jquery.com/toggleClass/ – helion3

切换类为切换订阅框jquery

回答

相关问题