1
Ich möchte eine Facebook-ähnliche Website erstellen .. Ich erstelle viel mehr von dieser Website. jetzt habe ich ein Problem. Ich habe drei Knöpfe. Freundschaftsanfrage, Nachricht und Benachrichtigung. Ich habe es bereits getan, um auf Drop-Down-Menü Freund Anfrage und Nachricht zu klicken. Aber es gibt ein Problem, wenn ich auf Freundschaftsanfrageknopf klicke und auf Fenster dann verbirg es nicht.window.onclick zweimal in einer Website verwenden
/* 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');
}
}
}
}
Das ist mein HTML-CSS-Code
<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>