我該如何改進我的javascript？ codepen包括

我使用此代碼的筆在我的網站在移動視圖菜單按鈕：http://codepen.io/anon/pen/LNNaYp 我該如何改進我的javascript？ codepen包括

有時按鈕中斷，當它是垃圾郵件，即點擊。菜單關閉時會出現'X'狀態。

無論如何，我想知道我可以如何提高我的JavaScript，因爲我知道我可以使用jQuery來做，我試過但失敗了。

HTML

<body> 
    <div class="showcase"><button type="button" role="button" aria-label="Toggle Navigation" id="buttonOne" class="lines-button x2"> 
<span class="lines"></span> 
</button> 
    </div> 
</body>

CSS

body { 
    background-color: #5DC1AF; 
} 

.showcase { 
    margin-top: 40px; 
    text-align: center; 
} 

.lines-button { 
    padding: 2rem 1rem; 
    transition: .3s; 
    cursor: pointer; 
    user-select: none; 
    border-radius: 0.57143rem; 
} 

/*.lines-button:hover { 
    opacity: 1; 
}*/ 

.lines-button:active { 
    transition: 0; 
} 

.lines { 
    display: inline-block; 
    width: 4rem; 
    height: 0.37143rem; 
    background: #ecf0f1; 
    border-radius: 0.28571rem; 
    transition: 0.3s; 
    position: relative; 
} 

.lines:before, 
.lines:after { 
    display: inline-block; 
    width: 4rem; 
    height: 0.37143rem; 
    background: #ecf0f1; 
    border-radius: 0.28571rem; 
    transition: 0.3s; 
    position: absolute; 
    left: 0; 
    content: ''; 
    -webkit-transform-origin: 0.28571rem center; 
    transform-origin: 0.28571rem center; 
} 

.lines:before { 
    top: 1rem; 
} 

.lines:after { 
    top: -1rem; 
} 

/*.lines-button:hover .lines:before { 
    top: 1.14286rem; 
} 

.lines-button:hover .lines:after { 
    top: -1.14286rem; 
}*/ 

.lines-button.close { 
    -webkit-transform: scale3d(0.8, 0.8, 0.8); 
    transform: scale3d(0.8, 0.8, 0.8); 
} 

button { 
    display: inline-block; 
    margin: 0 1em; 
    border: none; 
    background: none; 
} 

button span { 
    display: block; 
} 

.lines-button.x2 .lines { 
    transition: background 0.3s 0.5s ease; 
} 

.lines-button.x2 .lines:before, 
.lines-button.x2 .lines:after { 
    -webkit-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
    transition: top 0.3s 0.6s ease, -webkit-transform 0.3s ease; 
    transition: top 0.3s 0.6s ease, transform 0.3s ease; 
} 

.lines-button.x2.close .lines { 
    transition: background 0.3s 0s ease; 
    background: transparent; 
} 

.lines-button.x2.close .lines:before, 
.lines-button.x2.close .lines:after { 
    transition: top 0.3s ease, -webkit-transform 0.3s 0.5s ease; 
    transition: top 0.3s ease, transform 0.3s 0.5s ease; 
    top: 0; 
    width: 4rem; 
} 

.lines-button.x2.close .lines:before { 
    -webkit-transform: rotate3d(0, 0, 1, 45deg); 
    transform: rotate3d(0, 0, 1, 45deg); 
} 

.lines-button.x2.close .lines:after { 
    -webkit-transform: rotate3d(0, 0, 1, -45deg); 
    transform: rotate3d(0, 0, 1, -45deg); 
} 

button:focus { 
    outline: none !important; 
}

var anchor = document.querySelectorAll('button'); 

[].forEach.call(anchor, function(anchor) { 
    var open = false; 
    anchor.onclick = function(event) { 
    event.preventDefault(); 
    if (!open) { 
     this.classList.add('close'); 
     open = true; 
    } else { 
     this.classList.remove('close'); 
     open = false; 
    } 
    } 
});

來源

2016-03-11 A.H

你想要達到什麼目的？在我的地方codepen工作正常 – messerbill

不能再現任何破壞 – charlietfl

@ Gho5t你應該引用來源或不作出猜測 – charlietfl

View in JSFiddle

使用下面的jQuery代碼

$(document).ready(function() { 
    $("button").click(function() { 
    $(this).toggleClass("close"); 
    }); 
});

來源

2016-03-11 15:51:59 Harish

非常感謝，發揮魅力 –

我該如何改進我的javascript？ codepen包括

回答

相關問題