Преобразование Jquery Toggle to Javascript

Я совершенно не знаком с веб-программированием. Я создал слайд-навигацию и хотел, чтобы она скользила слева направо. Дело в том, что я просто нашел код JQuery. Я попытался найти его, выполнив поиск в google, но совпадения не совпадали с тем, что я искал.Преобразование Jquery Toggle to Javascript

Вот код:

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

Я хотел бы знать, если я могу перевести это в Javascript, потому что я хотел бы продолжать использовать HTML, CSS и Javascript.

Может ли кто-нибудь помочь мне?

источник

2016-07-27 Garzec

посмотреть на [селекторов] (https://developer.mozilla.org/ ru/docs/Web/Guide/CSS/Getting_started/Selectors), [querySelectorAll] (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), [Element.classList] (https://developer.mozilla.org/en/docs/Web/API/Element/classList) и т. д. –

jquery также javascript :) – lordkain

Я думаю, вам стоит попробовать конвертировать i t на Javascript самостоятельно, а затем попросите о помощи, если то, что вы пробовали, не работает. Вместо того, чтобы просить код «готово использовать». –

В чистом JavaScript это должно быть что-то вроде этого:

var elements = document.querySelectorAll('.nav-side .nav-toggle'); 
[].slice.call(elements).forEach(function(element) { 
    element.addEventListener('click', function() { 
     element.parentNode.classList.toggle('nav-open'); 
     return false; 
    }, false); 
});

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

источник

2016-07-27 11:53:18 VisioN

это кажется прекрасным, но навигационная панель не реагирует. Я связал свой javascript в html-скрипте таким образом: Неверно ли это? – Garzec

@ Garzec Я действительно не знаю. Это полностью зависит от способа организации разметки и файлов JavaScript. – VisioN

Вы можете использовать classList.toggle():

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

Вот codepen пример.

источник

2016-07-27 11:55:05

@Garzec Можете ли вы разместить свой html? –

Конечно, это мой HTML: <мета кодировка = "UTF-8"> Главная <тип ссылки = "текст/CSS" rel = "stylesheet" href = "Style.css">

???

Как я могу отформатировать код здесь для лучшего обзора? – Garzec

Попробуйте поместить свой тег сценария внизу, непосредственно перед закрывающим тегом тела (). Вы можете использовать [Инструменты ChromDev] (https://developers.google.com/web/tools/chrome-devt ools /? hl = ru), чтобы проверить, правильно ли загружается сценарий. –

Это чистый код 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);

источник

2016-07-27 12:01:09

Это работает так, как я хочу, чтобы это было :) Но 1 вопрос остался, на моем html-скрипте у меня есть сейчас: и на моем javascript, который я вставил в ваш код. Но я должен нажать 2 раза на кнопку, чтобы сделать навигационную панель слайдом. Как я могу это исправить ? – Garzec

Вот ваш HTML

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

И вот ваш Javascript, который добавляет стиль = "дисплей: нет;" когда родительский стиль = "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>

источник

2016-07-27 12:01:35

Это не переключает класс по запросу OP. –

Отредактированный ответ. Теперь он делает –

Я только что получил его письма:

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

Но спасибо всем за ответы :)

источник

2016-07-27 12:18:14 Garzec

ответ

Смежные вопросы