Javascript window.onclick在网站中使用两次_Javascript_Jquery_Html_Css_Facebook

Javascript window.onclick在网站中使用两次

javascript jquery html css facebook

Javascript window.onclick在网站中使用两次,javascript,jquery,html,css,facebook,Javascript,Jquery,Html,Css,Facebook,我想创建一个类似facebook的网站。。我创建了更多的网站。现在我有一个问题。我有三个按钮。好友请求、消息和通知。我已经完成了点击下拉菜单好友请求和消息。但有一个问题，当我点击好友请求按钮并点击窗口时，它并没有隐藏 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction()

我想创建一个类似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');
      }
    }
  }
}

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
document.getElementById（“好友请求”）.classList.toggle（“好友请求图标”）；
}
函数消息（）{
document.getElementById（“myDropdown2”）.classList.toggle（“显示”）；
document.getElementById（'message'）.classList.toggle（“messaget_图标”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.friend_request'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var dropdowns1=document.getElementsByClassName（“朋友请求”）；
var i；
对于（i=0；i


这是我的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>


.好友请求图标{
背景图片：url（../img/tVMd1hry4TG.png）！重要；
背景重复：不重复！重要；
背景尺寸：自动！重要；
背景位置：-4px-636px！重要；
左边距：0px！重要；
高度：28px！重要；
宽度：30px！重要；
}
.friend_请求{
背景图片：url（../img/tVMd1hry4TG.png）；
背景重复：无重复；
背景尺寸：自动；
背景位置：-4px-669px；
宽度：27px；
高度：22px；
浮动：左；
填充：5px 0px 0px 0px；
利润上限：-4px；
宽度：27px；
高度：26px；
}
.friend\u请求\u通知\u消息{
浮动：对；
保证金：0；
填充：0；
宽度：400px；
高度：20px；
填充顶部：10px；
垫底：12px；
}
.dropbtn{}
.dropbtn:悬停，
.dropbtn:focus{}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
边缘顶部：32px；
宽度：432px；
高度：497px；
左边缘：-18%；
}
.下拉式内容_消息{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
边缘顶部：32px；
宽度：432px；
高度：497px；
左边缘：-18%；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单-内容\消息a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单a:悬停{
背景色：#f1f1
}
.表演{
显示：块；
}
.表演{
显示：块；
}
.留言{
背景图片：url（../img/tVMd1hry4TG.png）；
背景重复：无重复；
背景尺寸：自动；
背景位置：-6px-178px；
高度：27px；
宽度：27px；
浮动：左；
填充：4px0px 3px0px；
利润：-6px 0px 0px 3px；
}
.messaget\u图标。好友请求\u图标{
背景图片：url（../img/tVMd1hry4TG.png）！重要；
背景重复：不重复！重要；
背景尺寸：自动！重要；
背景位置：-4px-636px！重要；
左边距：0px！重要；
高度：28px！重要；
宽度：30px！重要；
}
您可以使用double 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');
              }
            }
          }
        }

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
document.getElementById（“好友请求”）.classList.toggle（“好友请求图标”）；
}
函数消息（）{
document.getElementById（“myDropdown2”）.classList.toggle（“显示”）；
document.getElementById（'message'）.classList.toggle（“messaget_图标”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
wi