我希望在下拉菜单外单击时关闭下拉菜单，单击一次后箭头变为灰色，我希望它始终为相同颜色(黑色)。
http://codepen.io/anon/pen/YXMaGJ
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
最佳答案
我在这里发布了包含您的代码片段的完整 html 文件，您只需要在本地设置它并在浏览器中运行它..
检查下面的代码
<html>
<head>
<style type="text/css" rel="stylesheet">
.drop_container {
position:absolute;
right:25px;
width: 150px;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.drop_container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
display: block;
position: relative;
font-family: 'Open Sans', sans-serif;
padding: 10px 10px;
margin: 0;
outline: 0;
font-size: 1em;
text-decoration: none;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
}
.dropdown [data-toggle="dropdown"] {
color: black;
}
.dropdown [data-toggle="dropdown"]:hover {
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.6em;
color: black;
top: 14px;
right: 60px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #eeeeee;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-webkit-transition: max-height 0.6s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
body {
width:100%;
height:100%;
}
</style>
<script src=" http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').click(function(){
if($('.dropdown-menu').hasClass('show')){
$('.dropdown-menu').addClass('hide').removeClass('show');
$('i.icon-arrow').addClass('close').removeClass('open');
}
});
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
event.stopPropagation();
if($('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').addClass('hide').removeClass('show');
$('i.icon-arrow').addClass('close').removeClass('open');
}
else {
$('.dropdown-menu').addClass('show').removeClass('hide');
$('i.icon-arrow').addClass('open').removeClass('close');
}
};
});
});
</script>
</head>
<body>
<div class="drop_container">
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Hi<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Summary</a></li>
<li><a href="#">Purchase History</a></li>
<li><a href="#">User Settings</a></li>
<li><a href="/csgosupply/logout">Logout</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
关于Javascript，我如何调整这个 js 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32008008/