Question

我正在使用stackoverflow的某个用户提供的弹出插件。它工作得很好，但我想在同一页面上添加另一个，它会做一些奇怪的事情。第一个工作正常，第二个工作正常，但当我想关闭它时，它会打开第一个。有人能给我任何线索吗？我已经更改了所有类，ID等

第一个：

IMAPMessage m;
m.setHeader("myHeader", "myValue");

Secone one：

    ...
    <a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
    <div class="messagepop pop">
      <p>popup message1</p>
    </div>
    ...

<script>
  function deselect(e) {
    $('.pop').slideFadeToggle(function() {
      e.removeClass('selected');
    });    
  }

  $(function() {
    $('#contact').on('click', function() {
      if($(this).hasClass('selected')) {
        deselect($(this));               
      } else {
        $(this).addClass('selected');
        $('.pop').slideFadeToggle();
      }
      return false;
    });

    $('.close').on('click', function() {
      deselect($('#contact'));
      return false;
    });
  });

  $.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
  };

</script>

编辑：该脚本来自最佳答案HERE

Answer 1

在您的情况下，您可能会覆盖取消选择功能。

但是，不是将每个元素实例的代码乘以一个，而是可以使用DOM结构层次结构将其设置为更一般，例如：

function deselect(e) {
    e.next('.pop').slideFadeToggle(function () {
        e.removeClass('selected');
    });
}

$(function () {
    $('.menuButton').on('click', function () {
        if ($(this).hasClass('selected')) {
            deselect($(this));
        } else {
            $(this).addClass('selected');
            $(this).next('.pop').slideFadeToggle();
        }
        return false;
    });


});

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, 'fast', easing, callback);
};

演示：http://jsfiddle.net/IrvinDominin/u2fkff64/

两个相同的弹出插件不在一个页面上工作

1 个答案: