嗨，我有一个问题与我的登录按钮。 我想让如果用户登录； 帐户将显示，登录按钮将隐藏。 否则登录按钮显示，帐户隐藏。
我使用jquery编写代码，但不确定是否正确。 而且我觉得它根本不起作用。 如果可以，请给我一些建议，哪些地方需要正确。 谢谢。
以下是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<style>
.login{
float:right;
margin-right:50px;
margin-top:10px;
text-decoration:none;
background-color:darkcyan;
color:white;
padding:10px 25px;
border-radius:6px;
}
.login:hover{
background-color:white;
border: 2px solid darkcyan;
color:darkcyan;
overflow:hidden;
}
.account{
margin-left:70%;
margin-top:15px;
display:inline-block;
position:relative;
}
/* Popup container */
.notification{
position:absolute;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.notification .popuptext {
visibility: hidden;
width: 15px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 60px;
padding: 2px 4px;
position: absolute;
z-index: 1;
bottom: 96%;
left: 20%;
margin-left: 10px;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.notification .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.cart{
margin-left:50px;
position:absolute;
}
.user{
margin-left:108px;
position:absolute;
}
/* The container <div> - needed to position the dropdown content */
.user {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.user-dropdown {
display: none;
position: absolute;
background-color: #fff;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.user-dropdown a {
color: black;
padding: 12px 10px;
text-decoration: none;
display: block;
text-align: center;
}
/* Change color of dropdown links on hover */
.user-dropdown a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.user:hover .user-dropdown {display: block;}
</style>
</head>
<body>
<a href="" class="login" >Login</a>
<div class="account">
<div class="notification" onclick="myFunction()">
<i class='fas fa-bell' style='font-size:36px'></i>
<span class="popuptext" id="myPopup">1</span>
</div>
<div class="cart">
<i class='fas fa-shopping-cart' style='font-size:36px'></i>
</div>
<div class="user">
<i class='fas fa-user-circle' style='font-size:36px'></i>
<i class='fas fa-angle-down' style='font-size:24px'></i>
<div class="user-dropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<script>
// if user login, account show; login button hide.
// else login button show; account hide.
$(document).ready(function(){
$(".login").click(function(){
$(".account").toggle();
});
});
</script>
</body>
</html>
