登录按钮和div(帐户)隐藏和显示

嗨,我的登录按钮有问题。我想让用户登录;帐户将显示,登录按钮将隐藏。其他登录按钮显示,帐户隐藏。

我正在使用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>