library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix #809 - remove prevent default to follow links

Browse Source
This commit is contained in:
redonkulus 2021-01-20 11:35:15 -08:00
parent f6dc888942
commit 4c01e2c5ed
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
site/static/js/ui.js
View File

@ -1,13 +1,19 @@
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink');
// we fetch the elements each time because docusaurus removes the previous
// element references on page navigation
function getElements() {
return {
layout: document.getElementById('layout'),
menu: document.getElementById('menu'),
menuLink: document.getElementById('menuLink')
};
}
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
var classes = element.className.split(/\s+/);
var length = classes.length;
var i = 0;
for (; i < length; i++) {
if (classes[i] === className) {
@ -23,22 +29,23 @@
element.className = classes.join(' ');
}
function toggleAll(e) {
function toggleAll() {
var active = 'active';
var elements = getElements();
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
toggleClass(elements.layout, active);
toggleClass(elements.menu, active);
toggleClass(elements.menuLink, active);
}
function handleEvent(e) {
if (e.target.id === menuLink.id) {
return toggleAll(e);
}
var elements = getElements();
if (menu.className.indexOf('active') !== -1) {
return toggleAll(e);
if (e.target.id === elements.menuLink.id) {
toggleAll();
e.preventDefault();
} else if (elements.menu.className.indexOf('active') !== -1) {
toggleAll();
}
}

8
site/static/layouts/side-menu/index.html
View File

@ -19,17 +19,17 @@
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">Company</a>
<a class="pure-menu-heading" href="#company">Company</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#home" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#about" class="pure-menu-link">About</a></li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">
<a href="#" class="pure-menu-link">Services</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#contact" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>