Question

我创建了一个使用多个弹出窗口显示信息的网站。但是，当点击任何按钮时，所有弹出窗口将立即打开并覆盖我想要显示的信息。

以下是我目前的代码：

使用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>

如果您需要更多信息，请告诉我们。

由于

Answer 1

如上所述，你的HTML根本没有形成（[ul]标签必须有[li]子，HTML5中不支持[font]），而你的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();
  });

Here you can find a quick sample

Answer 2

使用<ul>标签时，您应该关闭他。使用<li>标记时，您必须拥有$(".box").on("click",function(){ if($(this).is("#square1")){ $("#text1").slideToggle(); $("#text2").css("display","none"); $("#text3").css("display","none"); }else if($(this).is("#square2")){ $("#text2").slideToggle(); $("#text1").css("display","none"); $("#text3").css("display","none"); }else if($(this).is("#square3")){ $("#text3").slideToggle(); $("#text2").css("display","none"); $("#text1").css("display","none"); }})标记。对不起，你的jquery代码很乱。我为你可能正在寻找的东西写了一个更简单的例子。

检查小提琴：https://jsfiddle.net/xtmzq2pn/1/

{{1}}

防止在点击时打开多个弹出窗口

2 个答案: