Выпадающее меню входа в систему с использованием Javascript

Question

Я пытаюсь создать раскрывающийся ящик входа с помощью Javascript, но он просто не будет работать с кодом, который я пытаюсь.

HTML:

<div id="links"> 

     <div id="links-wrap"> 

      <ul class="link"> 

       <li> 
        <a class="link1" href="#">Link 1</a> 
       </li> 

       <li> 
        <a class="link2" href="#">Link 2</a> 
       </li> 

       <li> 
        <a class="link3" href="#">Login</a> 

        <div id="login_wrap"> 

         <div class="login_menu"> 

          <form action="" method="post"> 
           Username:</br> <input id="username" type="text" name="username" size="16"> 
           Password: <input id="password" type="password" size="16" autocomplete="off"> 
           <br> 
           <input id="submit" type="submit" value="Login"> 
          </form> 

         </div> 

        </div> 

       </li> 

      </ul> 

     </div> 

    </div> 

CSS:

.link { 
color: #3e3e3e; 
display: block; 
letter-spacing: 2px; 
padding: 20px; 
position: relative; 
text-decoration: none; 
text-transform: uppercase; 
float: left; 
list-style-type: none; 
font-family: 'Open Sans', sans-serif; 
font-size:14px; 
} 

#links-wrap { 
float: right; 
width: auto; 
margin-top:-12px; 
font-weight:600; 
} 

li { 

padding-right:50px; 
display:list-item; 
text-align:-webkit-match-parent; 
display : inline-block; 
} 


.login { 

} 

#username { 
width:160px; 
} 

#password { 
width:160px; 
} 

#submit { 
margin-left:32.5%; 
margin-top:10px; 
} 

.login_menu { 
background-color:white; 
border:1px solid black; 
width: 180px; 
height: 125px; 
position: fixed; 
margin-left: -60px; 
margin-top:10px; 
z-index:10; 
font-size:10px; 

} 

#login_wrap { 
margin-left:10px; 
margin-top:10px; 
visibility: hidden; 
} 

Javascript:

$(document).ready(function() { 

    $(".link3").click(function() { 
    $(this).children("#login_wrap").css("visibility","visible"); 
    }); 

}); 

Я попытался несколько комбинаций в коде выше не принесло, и я уверен, что возможно, кто-то еще мог бы мне помочь.

Может ли кто-нибудь помочь указать, что я делаю неправильно?

спасибо.

Answer 1

Я исправил некоторые из вашего кода. Here - ссылка на рабочий пример.

Тогда основная ошибка вашего кода: $(this).children("#login_wrap"). В синтаксисе нет ничего плохого, но он должен быть $(this).parent().children("#login_wrap"), так как this обернут в тег <a>.

Here - старый пример, который я написал ранее. Эта альтернатива использует функцию toggle, чтобы добавить более приятный дисплей и возможность закрыть окно входа.

Answer 2

#login_wrap не является ребенком $(".link3"). Попробуйте:

$(".link3").click(function() { 
    $(this).siblings("#login_wrap").css("visibility","visible"); 
}); 

Или просто (как сНу ID считается тио быть уникальным в DOM):

$(".link3").click(function() { 
    $("#login_wrap").css("visibility","visible"); 
}); 

Answer 3

$(document).ready(function() { 

    $(".link3").click(function() { 
    $(this).parent().find("#login_wrap").toggle(); 
    }); 

}); 

Я рекомендую смотреть на родителей, а затем искать детей. В этом случае родительский элемент служит контекстом для ваших тегов. Это создаст более удобный код. Потому что, когда вы используете .siblings() или какую-то функцию для поиска элемента управления входами, ваш код javascript связан с текущей позицией тегов. В будущем, если вы измените позицию, например, вложенную на еще один уровень, ваш код завершится неудачно. И если у вас есть несколько элементов управления на странице, этот код по-прежнему работает нормально и откройте правильный элемент управления, связанный со ссылкой.

Боковое примечание: В случае, если вы отображаете несколько элементов управления, подобных этому на странице, не следует использовать id = "login_wrapped", но вместо этого используйте вместо этого class = "login_wrapped".