Javascript, как мне настроить это раскрывающееся меню js

Я хочу, чтобы выпадающее меню закрывалось, когда я нажимаю на него, и стрелка становится серым после того, как я щелкнул ее один раз, я хочу, чтобы он был того же цвета все время (черный).Javascript, как мне настроить это раскрывающееся меню js

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); 
};

источник

2015-08-14 Eric

Пожалуйста, напишите ур код, что вы пробовали. – abpatil

$ (document) .click (function() {$ (". Dropdown"). Hide();}); Нашел этот код, но как его реализовать? – Eric

Здесь я отправляю полный HTML-файл с отрывками кода вам просто нужно настроить его локально и запустить его в браузере ..

check below code

<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>

источник

2015-08-14 11:17:46 dom

Im новое к этому, и я действительно не понимаю его, должен ли я заменить кнопку button.onclick у меня было? Можете ли вы вставить мне полный код, я должен ввести – Eric

, удобный с jquery ??? – dom

Нет, не правда, новичок – Eric

Javascript, как мне настроить это раскрывающееся меню js

ответ

Смежные вопросы