在下面，我插入了一个片段，function expandShareBar应该添加一个如下的eventListener：
function expandShareBar() {
document.querySelector(".socialShare").addEventListener("click", function (e) {
var sharebtn = document.querySelectorAll(".shareBtn");
sharebtn.forEach(function (item) {
item.classList.remove("no");
item.classList.toggle("active");
document.querySelector(".share").classList.toggle("active");
});
});
}
但是，当我单击社交媒体按钮时，此功能将切换活动班级，然后折叠按钮。但是，仅应在.socialShare类处触发此函数。
我想念为什么会在社交媒体按钮上触发该事件吗？
var initSocialShare = {
config: {
facebook: true,
whatsapp: true,
linkedin: true,
twitter: true,
pocket: true,
copy: true
}
}
function showOverlay() {
var overlay = document.querySelector(".copylink-expand-menu");
overlay.style.display = "block";
overlay.style.position = "absolute";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.background = "rgba(0,0,0,0.8)";
overlay.style.color = "#ffffff";
overlay.style.textAlign = "center";
overlay.style.zIndex = "100000";
overlayHeader = document.querySelector(".copylink-expand-title");
overlayHeader.style.fontSize = "60px";
overlayHeader.style.fontWeight = "300";
overlayHeader.style.lineHeight = "60px";
overlayHeader.style.color = "#fff";
overlayHeader.style.margin = "30px 35px 30px";
document.querySelector(".at-expanded-menu-hd").style.display = "inline-block";
var url = window.location.href;
var title = document.getElementsByTagName("title")[0].innerHTML;
document.querySelector(".copylink-expand-menu-title").innerHTML = title;
document.querySelector(".copylink-expand-menu-url").innerHTML = url;
document.querySelector(".copylink-page-url").value = url;
}
function copyText(selector) {
/* Get the text field */
var copyTextSelector = document.querySelector(selector);
/* Select the text field */
copyTextSelector.select();
/* Copy the text inside the text field */
document.execCommand("Copy");
/* Alert the copied text */
document.querySelector(".alert").style.display = "inline-block";
if (selector === "#shareButton-code") {
document.querySelector(".alert-success").style.display = "inline-block";
}
setTimeout(function () {
document.querySelector(".alert").style.display = "none";
document.querySelector(".alert-success").style.display = "none";
}, 1500);
}
function expandShareBar() {
document.querySelector(".socialShare").addEventListener("click", function (e) {
var sharebtn = document.querySelectorAll(".shareBtn");
sharebtn.forEach(function (item) {
item.classList.remove("no");
item.classList.toggle("active");
document.querySelector(".share").classList.toggle("active");
});
});
}
function changeExpandingUrl() {
if (initSocialShare.config.facebook) {
document
.querySelector("#fs_facebook-btn")
.setAttribute(
"onclick",
"window.open('https://www.facebook.com/sharer/sharer.php?u=" +
encodeURIComponent(location.href) +
"', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0')"
);
}
if (initSocialShare.config.whatsapp) {
document
.querySelector("#fs_whatsapp-btn")
.setAttribute(
"onclick",
"window.open('https://web.whatsapp.com/send?text=" +
encodeURIComponent(location.href) +
"', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0')"
);
}
if (initSocialShare.config.linkedin) {
document
.querySelector("#fs_linkedin-btn")
.setAttribute(
"onclick",
"window.open('https://www.linkedin.com/shareArticle?mini=true&url=" +
encodeURIComponent(location.href) +
"&title=" +
document.title +
"', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=600, height=400, toolbar=0, status=0');"
);
}
if (initSocialShare.config.twitter) {
document
.querySelector("#fs_twitter-btn")
.setAttribute(
"onclick",
"window.open('https://twitter.com/intent/tweet?text=" +
document.title +
"&url=" +
encodeURIComponent(location.href) +
"', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');"
);
}
if (initSocialShare.config.pocket) {
document
.querySelector("#fs_pocket-btn")
.setAttribute(
"onclick",
"window.open('https://getpocket.com/save?url" +
encodeURIComponent(location.href) +
"', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');"
);
}
if (initSocialShare.config.copy) {
document
.querySelector("#fs_copy-btn")
.setAttribute("onclick", "showOverlay()");
}
}
expandShareBar();
changeExpandingUrl(); .shareBtns {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAwCAYAAACxIqevAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODQxRkU2NDY2NERCMTFFOEJBNDdBMjRBRkM4M0Y1ODUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODQxRkU2NDU2NERCMTFFOEJBNDdBMjRBRkM4M0Y1ODUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMxM0M3QjhENjRCNzExRTg4MTgyQ0NFRUY4RjQzQ0RBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMxM0M3QjhFNjRCNzExRTg4MTgyQ0NFRUY4RjQzQ0RBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GeSucAAAGCdJREFUeNrsXQl4lNW5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') no-repeat;
}
#fs_facebook-btn {
background-position: -0px 0;
}
#fs_whatsapp-btn {
background-position: -48px 0;
}
#fs_twitter-btn {
background-position: -96px 0;
}
#fs_linkedin-btn {
background-position: -144px 0;
}
#fs_pocket-btn {
background-position: -192px 0;
}
#fs_copy-btn {
background-position: -240px 0;
}
.alert {
padding: 10px;
background-color: #6bbd6e;
color: white;
margin-top: 20px;
border-radius: 5px;
}
.copyBtn {
background-color: #0295ff;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
display: block;
font-size: 1pc;
margin: 15px auto 0;
padding: 15px 35px;
transition: background-color 0.2s ease-in;
}
.closebtnOverlay {
position: fixed;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
z-index: 16777274;
background: none;
background-color: #fff;
border: none;
border-radius: 50%;
color: #000;
font-family: arial, sans-serif;
font-size: 28px;
font-weight: 400;
line-height: normal;
cursor: pointer;
transition: all 0.4s ease;
}
.closebtnOverlay:hover {
background-color: #666;
color: #fff;
}
.copyBtn:hover {
background-color: #0078ce;
}
.copylink-page-url {
width: 450px;
height: 30px;
}
.copylink-expand-menu {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
text-align: center;
z-index: 100000;
}
/* Expanding share bar */
.share,
.share:before,
.share:after,
.shareBtn {
position: absolute;
height: 56px;
width: 56px;
background: white;
border-radius: 50%;
cursor: pointer;
}
.share {
position: fixed;
bottom: 10px;
left: 10px;
z-index: 9999;
}
.share .shareBtns {
border-radius: 50%;
margin: 4px !important;
}
.share:before,
.share:after {
content: "";
will-change: transform;
}
.share:before {
background: url(https://cbwconline.com/IMG/Codepen/Plus-Light-Blue.svg) center/28px no-repeat;
z-index: 5;
transition: 0.3s;
}
.share:after {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: -1;
transition: 0.39s;
}
.share.active:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.shareBtn {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: 0.3s;
-webkit-animation: 0.3s down forwards;
animation: 0.3s down forwards;
opacity: 0;
will-change: animation;
}
.shareBtn.active {
-webkit-animation: 0.48s up forwards;
animation: 0.48s up forwards;
}
.shareBtn.active:nth-child(1) {
-webkit-animation-delay: 0.39s;
animation-delay: 0.39s;
}
.shareBtn.active:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.shareBtn.no {
-webkit-animation: none;
animation: none;
}
@-webkit-keyframes up {
50% {
-webkit-transform: translateY(-170%);
transform: translateY(-170%);
}
100% {
opacity: 1;
-webkit-transform: translateY(-130%);
transform: translateY(-130%);
}
}
@keyframes up {
50% {
-webkit-transform: translateY(-170%);
transform: translateY(-170%);
}
100% {
opacity: 1;
-webkit-transform: translateY(-130%);
transform: translateY(-130%);
}
}
@-webkit-keyframes down {
0% {
opacity: 1;
-webkit-transform: translateY(-130%);
transform: translateY(-130%);
}
100% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
top: 0;
}
}
@keyframes down {
0% {
opacity: 1;
-webkit-transform: translateY(-130%);
transform: translateY(-130%);
}
100% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
top: 0;
}
}<div class="socialShare share" data-top1="150" data-top2="20" data-margin="0">
<span id="socialShare">
<div class="shareBtn" style="top: -330px;">
<a rel="nofollow" class="shareBtns" style="display:block;width:48px;height:48px;margin:0 0 3px;padding:0;outline:none;"
href="#" id="fs_facebook-btn" data-count="facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false"
title="Share on Facebook" target="_self"></a>
</div>
<div class="shareBtn" style="top: -264px;">
<a rel="nofollow" class="shareBtns" style="display:block;width:48px;height:48px;margin:0 0 3px;padding:0;outline:none;"
href="#" id="fs_whatsapp-btn" data-count="whatsapp" data-action="share/whatsapp/share" onclick="window.open('https://web.whatsapp.com/send?text=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false"
title="Share on Whatsapp" target="_self"></a>
</div>
<div class="shareBtn" style="top: -198px;">
<a rel="nofollow" class="shareBtns" style="display:block;width:48px;height:48px;margin:0 0 3px;padding:0;outline:none;"
href="#" id="fs_linkedin-btn" data-count="linkedin" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F&title=BetterAddThis%20-%20Gratis%20social%20share%20buttons', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=600, height=400, toolbar=0, status=0');return false"
title="Share on Linkedin" target="_self"></a>
</div>
<div class="shareBtn" style="top: -132px;">
<a rel="nofollow" class="shareBtns" style="display:block;width:48px;height:48px;margin:0 0 3px;padding:0;outline:none;"
href="#" id="fs_twitter-btn" data-count="twitter" onclick="window.open('https://twitter.com/intent/tweet?text=BetterAddThis%20-%20Gratis%20social%20share%20buttons&url=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false"
title="Share on Twitter" ;="" target="_self"></a>
</div>
<div class="shareBtn" style="top: -66px;">
<a rel="nofollow" class="shareBtns" style="display:block;width:48px;height:48px;margin:0 0 3px;padding:0;outline:none;"
href="#" id="fs_pocket-btn" data-count="pocket" onclick="window.open('https://getpocket.com/save?urlhttp%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false"
title="Share on Pocket" target="_self"></a>
</div>
<div class="shareBtn" style="top: 0px;">
<a rel="nofollow" class="shareBtns" style="display:block;width:48px;height:48px;margin:0 0 3px;padding:0;outline:none;"
href="#" id="fs_copy-btn" title="Copy link to clipboard" onclick="showOverlay()" target="_self"></a>
</div>
</span>
</div>
<div class="copylink-expand-menu" style="display: none">
<span class="closebtnOverlay" onclick="this.parentElement.style.display='none';">×</span>
<div id="at-expanded-menu-hd" class="at-expanded-menu-hd">
<h1 class="copylink-expand-title">Copy Link</h1>
<div>
<p class="copylink-expand-menu-title" style="display:block;">Titel of page</p>
<p class="copylink-expand-menu-url"></p>
</div>
<input class="copylink-page-url" type="text" readonly="" value="">
<br>
<button class="copyBtn" onclick="copyText('.copylink-page-url')">
<span class="tooltiptext" id="myTooltip">Copy</span>
</button>
<div class="alert" style="display:none;">
Copied to clipboard
</div>
</div>
</div>