个人中心
gpt4 book ai didi

Javascript，我如何调整这个 js 下拉菜单

转载 作者：行者123 更新时间：2023-11-30 00:24:21 24 4
gpt4 key购买 nike

我希望在下拉菜单外单击时关闭下拉菜单，单击一次后箭头变为灰色，我希望它始终为相同颜色(黑色)。

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/

24 4 0
文章推荐： javascript - 为什么 elem.hasOwnProperty() 是假的
文章推荐： php - 选项菜单从不同的价格到具有价格范围的选项
文章推荐： php - mysql中的变量类似语句
文章推荐： javascript - 滑出菜单不滑出