我创建了一个使用多个弹出窗口显示信息的网站。但是，当点击任何按钮时，所有的弹出窗口都会立即打开，并会掩盖我想要显示的信息。
下面是我目前的代码:
Javascript:
(我相信这可能是我犯错误的地方，因为当单击一个按钮时，单击另一个按钮只会关闭弹出窗口，而不会像我预期的那样打开一个新的弹出窗口。)
function deselect(e) {
$('.pop').slideToggle('normal', function() {
e.removeClass('selected');
});
}
$(function() {
$('#youtube, #youtube-popup').on('click', function() {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('#youtube');
// $(this).removeClass('#twitch');
$('.pop').slideToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($(this).closest('#youtube, #youtube-popup'));
return false;
});
});
CSS:
.messagepop {
background-color: #ffffff;
opacity: 1;
color: #000000;
display: none;
bottom: 0px;
position: absolute;
text-align: center;
width: 100%;
height: 20%;
z-index: 50;
padding: 25px 25px 20px;
text-align: center;
vertical-align: middle;
}
.messagepop p,
.messagepop.div {
padding-top: 200px;
}
HTML:
我可能把这部分过于复杂化了，这可能会导致更多的错误。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body bgcolor="grey">
<div class="container">
<div class="row">
<br>
<ul class="list-inline">
<div class="hover">
<img href="" id="youtube" src="http://geniussys.com/img/placeholder/blogpost-avatar-50x50.png" padding="1px 1px 1px 1px"></div>
<div class="hover">
<img href="" id="twitter" src="http://geniussys.com/img/placeholder/blogpost-avatar-50x50.png" padding="1px 1px 1px 1px"></div>
<div class="hover">
<img href="" id="facebook" src="http://geniussys.com/img/placeholder/blogpost-avatar-50x50.png" padding="1px 1px 1px 1px"></div>
</ul>
</div>
</div>
<div class="messagepop pop">
<div id="youtube-popup">
<font size=5><b>Text 1</b>
<br><font size=2>
Text 1.
<br><font size=5><b>Text 2</b>
<br><font size=2>Text 2.
</font>
<div class="messagepop pop">
<div id="twitter-popup">
<font size=5><b>Text 3</b>
<br><font size=2>Text 3.
<br><font size=5><b>Text 4</b>
<br><font size=2>Text 4.
<br><font size=5><b>Text 5</b>
<br><font size=2>Text 5.
</font></div>
</div>
<div class="messagepop pop">
<div id="facebook-popup">
<font size=5><b>Text 6</b>
<br><font size=2>Text 6.
</font></div>
</div>
如果您需要更多信息，请告诉我。
谢谢
最佳答案
如前所述，您的 HTML 格式根本不正确([ul] 标记必须有 [li] 子标记，[font] 在 HTML5 中不受支持)，并且您的 javascript 是......糟糕!
您可以使用单个函数实现所需的行为
$('img').on('click', function() {
$('.pop.active').each(function() { $(this).slideToggle(); $(this).removeClass('active'); $('#' + $(this).data('refli')).removeClass('selected'); });
var myId= $('#' + $(this).attr('id'));
var myPop= $('#' + $(this).attr('id') + '-popup');
myId.addClass('selected');
myPop.addClass('active');
myPop.slideToggle();
});
关于javascript - 防止单击时打开多个弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38566332/