将Jquery切换转换为Javascript

时间:2016-07-27 11:46:10

标签: javascript jquery translate

我对网络编程完全陌生。我建了一个幻灯片导航,想让它从左边滑到中间。问题是我刚刚发现了一个Jquery代码。我试图通过搜索谷歌来查找,但匹配与我正在寻找的东西不匹配。

以下是代码:

$('.nav-side .nav-toggle').on('click', function(e){
    e.preventDefault();
    $(this).parent().toggleClass('nav-open');
})

我想知道我是否可以将其转换为Javascript,因为我想继续使用HTML,CSS和Javascript。

有人可以帮助我吗?

5 个答案:

答案 0 :(得分:2)

在纯JavaScript中,它应该是这样的:

@Configuration
public class JerseyConfig extends ResourceConfig {

public JerseyConfig() {
    registerEndpoints();
    registerExceptionMappers();
}

private void registerEndpoints() {
    register(AImpl.class);
    register(BImpl.class);
    register(CImpl.class);
    register(DImpl.class);
    register(EImpl.class);
}

private void registerExceptionMappers() {
    register(NotAllowedExceptionMapper.class);
    register(NotFoundExceptionMapper.class);
}
}

JSFiddle: https://jsfiddle.net/r0x7zehz/

答案 1 :(得分:1)

您可以使用classList.toggle()

document.getElementsByClassName('nav-toggle')[0].addEventListener('click', function(e){
    e.preventDefault();
    e.target.parentNode.classList.toggle('nav-open');
});

以下是codepen示例。

答案 2 :(得分:1)

这是纯粹的JavaScript代码

function clickHandler(dom)
{
    dom.addEventListener('click', function(e) {
        dom.parentNode.classList.toggle('nav-open');
        return false;
    }, false);
}
document.querySelector('.nav-side .nav-toggle').map(clickHandler);

答案 3 :(得分:1)

这是您的HTML

<a href="#" class="nav-toggle" onclick="toggleFunction(this)">Toggle</a>

这是你的javascript添加了style =“display:none;”当parent style =“display:block;”时。反之亦然

<script>
function toggleFunction(elem){
    var parent = elem.parentNode;
    if(hasClass(parent, 'nav-open')){
         parent.classList.remove('nav-open');
    }else{
        parent.className += " nav-open";
    }
}
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
</script>

答案 4 :(得分:1)

我刚写完:

function clickHandler(dom){
        dom.parentNode.classList.toggle('nav-open');
        return false;
}

但是感谢大家的答案:)