Как сделать событие клика на меню?

Question

    //HTML
     <div class="Login"><a href="" class="LoginA">Вход</a> / <a 
     href="">Регистрация</a>
         <div class="DropdownMenu">
            <input type="text" placeholer="Email"/>
            <input type="text" placeholer="Password"/>
            <input type="button" value="Войти"/>
            <p>Забыли пароль?</p>
            </div>
        </div>
   //CSS
  .Login {
  float: right;
  padding-left:30px;
  padding-top:30px;
  }
 .DropdownMenu {
 width: 245.19px;
 background-color: gray;
 display: none;
 height: 140px;
 opacity: 0.8;
 text-align:center;
 position:absolute;
 font-size:20px;  
 }
.LoginA:hover ~ .DropdownMenu, .DropdownMenu:hover {
  display: block;
}

Само меню работает. Как сделать так, чтобы при клике на ссылку (LoginA) оно открывалось (при этом не закрывалось, если нажать на поля ввода в этом меню), а при повторном клике закрывалось? Тут нужен JS?

Answer 1

Можно обойтись и без js, с помощью нехитрой манипуляции с чекбоксом. Только ссылку нужно будет заменить на лейбл к этому чекбоксу.

Кликаете по лейблу => чекбокс получает статус checked => DropdownMenu открывается. Кликаете снова - закрывается:

.Login {
  float: right;
  padding-left:30px;
  padding-top:30px;
  }
 .DropdownMenu {
 width: 245.19px;
 background-color: gray;
 display: none;
 height: 140px;
 opacity: 0.8;
 text-align:center;
 position:absolute;
 right: 0;
 font-size:20px;  
 }
 #login {
   display: none;
 }
 label[for="login"] {
   cursor: pointer;
   text-decoration: underline;
 }
#login:checked ~ .DropdownMenu {
  display: block;
}

<div class="Login">
   <input type="checkbox" id="login" /> 
   <label for="login">Вход</label> /
   <a href="">Регистрация</a>
     <div class="DropdownMenu">
       <input type="text" placeholer="Email"/>
       <input type="text" placeholer="Password"/>
       <input type="button" value="Войти"/>
       <p>Забыли пароль?</p>
     </div>
</div>

БЛОГ НА HUSL

Как сделать событие клика на меню?

Ответы (1 шт):