Javascript，如何调整js下拉菜单_Javascript_Jquery

Javascript，如何调整js下拉菜单

javascript jquery

Javascript，如何调整js下拉菜单,javascript,jquery,Javascript,Jquery,我想有下拉菜单关闭时，我点击它的外部和箭头变成灰色后，我点击了一次，我想它是相同的颜色所有的时间（黑色）在这里，我发布了完整的html文件和您的代码片段，您只需要在本地设置并在浏览器中运行它检查下面的代码 <html> <head> <style type="text/css" rel="stylesheet"> .drop_container { position:absolute; right:25px; width: 150px; padding

我想有下拉菜单关闭时，我点击它的外部和箭头变成灰色后，我点击了一次，我想它是相同的颜色所有的时间（黑色）

在这里，我发布了完整的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>


.drop_容器{
位置：绝对位置；
右：25px；
宽度：150px；
填充：0；
字体系列：“开放式Sans”，无衬线；
}
.drop_容器>ul{
列表样式：无；
填充：0；
利润率：0.20px0；
}
.下载{
文字装饰：无；
}
.dropdown[数据切换=“dropdown”]{
显示：块；
位置：相对位置；
字体系列：“开放式Sans”，无衬线；
填充：10px 10px；
保证金：0；
大纲：0；
字号：1em；
文字装饰：无；
空白：nowrap；
换字：正常；
垂直对齐：中间对齐；
光标：指针；
边界半径：2px；
}
.dropdown[数据切换=“dropdown”]{
颜色：黑色；
}
.dropdown[数据切换=“dropdown”]：悬停{
}
.下拉菜单.图标箭头{
位置：绝对位置；
显示：块；
字号：0.6em；
颜色：黑色；
顶部：14px；
右：60px；
}
.下拉列表.图标箭头.打开{
-webkit变换：旋转（-180度）；
-moz变换：旋转（-180度）；
-ms变换：旋转（-180度）；
-o变换：旋转（-180度）；
变换：旋转（-180度）；
-webkit转换：-webkit转换0.4s；
-moz变换：-moz变换0.4s；
-o-转变：-o-转变0.4s；
转变：转变0.4s；
}
.下拉菜单.图标箭头.关闭{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：-webkit转换0.4s；
-moz变换：-moz变换0.4s；
-o-转变：-o-转变0.4s；
转变：转变0.4s；
}
.下拉列表.图标箭头：之前{
内容：'\25BC'；
}
.下拉菜单.下拉菜单{
最大高度：0；
溢出：隐藏；
列表样式：无；
填充：0；
保证金：0；
}
.下拉菜单.下拉菜单{
填充：0；
}
.下拉菜单.下拉菜单a{
显示：块；
颜色：#6e6e；
背景：#eeeeee；
-webkit盒阴影：0 1px 0白色插图，0-1px 0#d4插图；
-moz盒阴影：0 1px 0白色插图，0-1px 0#d4插图；
盒影：0 1px 0白色插图，0-1px 0#d4插图；
文本阴影：0-1px0RGBA（255,255,255,0.3）；
填充：10px 10px；
}
.下拉菜单.下拉菜单a:悬停{
背景：#f6f6f6；
}
.dropdown.show、.dropdown.hide{
-webkit转换来源：50%0%；
-moz变换原点：50%0%；
-ms变换原点：50%0%；
-o-变换原点：50%0%；
变换原点：50%0%；
}
.下拉列表.显示{
显示：块；
最大高度：9999px；
-webkit转换：scaleY（1）；
-moz变换：scaleY（1）；
-ms变换：scaleY（1）；
-o变换：scaleY（1）；
变换：scaleY（1）；
动画：showAnimation 0.5s缓进缓出；
-moz动画：showAnimation 0.5s轻松输入输出；
-webkit动画：showAnimation 0.5s轻松输入输出；
-webkit过渡：最大高度1s，易于进出；
-moz过渡：最大高度1s，易于输入输出；
-o型过渡：最大高度1s，易于进出；
过渡：最大高度1s，易于进出；
}
.下拉.隐藏{
最大高度：0；
-webkit转换：scaleY（0）；
-moz变换：scaleY（0）；
-ms变换：scaleY（0）；
-o变换：scaleY（0）；
变换：scaleY（0）；
动画：隐藏0.4s缓解；
-moz动画：隐藏0.4s缓解；
-webkit动画：隐藏动画0.4s缓解；
-webkit过渡：最大高度0.6s放松；
-moz过渡：最大高度0.6s放松；
-o型过渡：最大高度0.6s缓解；
过渡段：最大高度0.6s放松；
}
身体{
宽度：100%；
身高：100%；
}
$（文档）.ready（函数（）{
$（'body'）。单击（函数（）{
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（下拉，0）；
dropdownArray.forEach（函数（el）{
var button=el.querySelector（'a[data toggle=“dropdown”]”），
menu=el.querySelector（“.下拉菜单”），
arrow=button.querySelector（'i.icon-arrow'）；
button.onclick=函数（事件）{
event.stopPropagation（）；
if（$（'.dropdown menu'）.hasClass（'show'））{
$（'.dropdown menu'）.addClass（'hide'）.removeClass（'show'）；
$（'i.icon-arrow'）.addClass（'close'）.removeClass（'open'）；
}
否则{
$（'.dropdown menu'）.addClass（'show'）.removeClass（'hide'）；
$（'i.icon-arrow'）.addClass（'open'）.removeClass（'close'）；
}
};
});
});

请发布您尝试过的代码。$（文档）。单击（函数（）{$（“.dropdown”）.hide（）；}）；我发现了这段代码，但是我应该如何实现它呢？我对这段代码还不熟悉，但我不太理解，我应该替换我的button.onclick吗？你能给我贴上完整的代码吗？我应该打不beginner@Eric现在检查我已经在我的Answeat中发布了完整的代码不工作下拉列表没有显示，它对你有效吗？@Eric code对我很有效。。。。。我想你需要完整的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>