Question

我想创建一个类似Facebook的网站..我创建了更多的网站。现在我有一个问题。我有三个按钮。朋友请求，消息和通知。我已经完成了点击下拉菜单的朋友请求和消息。但是有一个问题，当我点击朋友请求按钮并单击窗口然后它不会隐藏。

/* When the user clicks on the button, 
                    toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
  document.getElementById('friend_request').classList.toggle("friend_request_icon");
}

function message() {
  document.getElementById("myDropdown2").classList.toggle("shows");
  document.getElementById('message').classList.toggle("messaget_icon");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.friend_request')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var dropdowns1 = document.getElementsByClassName("friend_request");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }

    for (i = 0; i < dropdowns1.length; i++) {
      var dropdowns1 = dropdowns1[i];
      if (dropdowns1.classList.contains('friend_request_icon')) {
        dropdowns1.classList.remove('friend_request_icon');
      }
    }
  }
}


// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.message')) {

    var message_ = document.getElementsByClassName("dropdown-content_message");
    var message_1 = document.getElementsByClassName("message");
    var i;
    for (i = 0; i < message_.length; i++) {
      var openDropdown1 = message_[i];
      if (openDropdown1.classList.contains('shows')) {
        openDropdown1.classList.remove('shows');
      }
    }

    for (i = 0; i < message_1.length; i++) {
      var message_1 = message_1[i];
      if (message_1.classList.contains('messaget_icon')) {
        message_1.classList.remove('messaget_icon');
      }
    }
  }
}

这是我的HTML css代码

<html>

  <head>
    <style>
      .friend_request_icon {
        background-image: url(../img/tVMd1hry4TG.png) !important;
        background-repeat: no-repeat !important;
        background-size: auto !important;
        background-position: -4px -636px !important;
        margin-left: 0px !important;
        height: 28px !important;
        width: 30px !important;
      }

      .friend_request {
        background-image: url(../img/tVMd1hry4TG.png);
        background-repeat: no-repeat;
        background-size: auto;
        background-position: -4px -669px;
        width: 27px;
        height: 22px;
        float: left;
        padding: 5px 0px 0px 0px;
        margin-top: -4px;
        width: 27px;
        height: 26px;
      }

      .friend_request_notification_message {
        float: right;
        margin: 0;
        padding: 0;
        width: 400px;
        height: 20px;
        padding-top: 10px;
        padding-bottom: 12px;
      }

      .dropbtn {}

      .dropbtn:hover,
      .dropbtn:focus {}

      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        margin-top: 32px;
        width: 432px;
        height: 497px;
        margin-left: -18%;
      }

      .dropdown-content_message {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        margin-top: 32px;
        width: 432px;
        height: 497px;
        margin-left: -18%;
      }

      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown-content_message a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown a:hover {
        background-color: #f1f1f1
      }

      .show {
        display: block;
      }

      .shows {
        display: block;
      }

      .message {
        background-image: url(../img/tVMd1hry4TG.png);
        background-repeat: no-repeat;
        background-size: auto;
        background-position: -6px -178px;
        height: 27px;
        width: 27px;
        float: left;
        padding: 4px 0px 3px 0px;
        margin: -6px 0px 0px 3px;
      }

      .messaget_icon.friend_request_icon {
        background-image: url(../img/tVMd1hry4TG.png) !important;
        background-repeat: no-repeat !important;
        background-size: auto !important;
        background-position: -4px -636px !important;
        margin-left: 0px !important;
        height: 28px !important;
        width: 30px !important;
      }

    </style>
  </head>

  <body>
    <div class="friend_request_notification_message">
      <a href="#">
        <div class="friend_request  " id="friend_request" onclick="myFunction()">

        </div>
      </a>
      <div id="myDropdown" class="dropdown-content">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>

      </div>


      <a href="#">
        <div class="message " id="message" onclick="message()">
        </div>
      </a>
      <div id="myDropdown2" class="dropdown-content_message">
        <a href="#home">how</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>

      </div>



      <div class="notification">
      </div>



    </div>


  </body>

</html>

Answer 1

你使用双重window.onclick，以便一个人不能使用这个

/* When the user clicks on the button, 
        toggle between hiding and showing the dropdown content */
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
            document.getElementById('friend_request').classList.toggle("friend_request_icon");
        }
        function message() {
            document.getElementById("myDropdown2").classList.toggle("shows");
            document.getElementById('message').classList.toggle("messaget_icon");
        }

        // Close the dropdown if the user clicks outside of it
        window.onclick = function(event) {
          if (!event.target.matches('.friend_request')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var dropdowns1 = document.getElementsByClassName("friend_request");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
              var openDropdown = dropdowns[i];
              if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
              }
            }

            for (i = 0; i < dropdowns1.length; i++) {
              var dropdowns1 = dropdowns1[i];
              if (dropdowns1.classList.contains('friend_request_icon')) {
                dropdowns1.classList.remove('friend_request_icon');
              }
            }
          }


          if (!event.target.matches('.message')) {

            var message_ = document.getElementsByClassName("dropdown-content_message");
            var message_1 = document.getElementsByClassName("message");
            var i;
            for (i = 0; i < message_.length; i++) {
              var openDropdown1 = message_[i];
              if (openDropdown1.classList.contains('shows')) {
                openDropdown1.classList.remove('shows');
              }
            }

            for (i = 0; i < message_1.length; i++) {
              var message_1 = message_1[i];
              if (message_1.classList.contains('messaget_icon')) {
                message_1.classList.remove('messaget_icon');
              }
            }
          }
        }

window.onclick在网站中使用两次

1 个答案: