Question

点击“＆＃39”后会显示弹出式帮助（DIV段落）。我用＆＃34;缓和＆＃34;得到了这个例子。 JS功能，但我不完全理解它是如何工作的。

CSS样式会影响所有帮助框，但我不希望所有这些框一致地打开/关闭，只有特定的一个被点击。我不想将其中的每一个都固定为特定的CSS样式或#ID。现在他们全部根据CSS样式打开。

function deselect(e) {
  $('.helpbox').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('.helpicon').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.helpbox').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);
};

有什么想法吗？

Answer 1

您当前的代码显然会同时显示两个帮助框，因为您直接定位两个帮助框都包含的类，您应该将两个帮助框都包含在不同的div中以及?图标，然后使用{来自jquery的{1}}函数显示和隐藏特定siblings()

的帮助框

比方说，在? div中有2个元素

帮助信箱图标
Helpbox文本容器

在这种情况下，Helpbox文本容器是Helpbox图标的兄弟，因此您可以使用row函数将它们包装在父siblings

中

见下文：

div

的javascript：

<div class="row">
    Click to show help popup overlay 1
    <a class="helpicon" href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/VisualEditor_-_Icon_-_Help.svg/2000px-VisualEditor_-_Icon_-_Help.svg.png" width=15 height=15 />
    </a>
    <div class="helpbox">
        Popup #1
    </div>
</div>
<br/>
<br/>
<br/>
<div class="row">
    Click to show help popup overlay 2
    <a class="helpicon" href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/VisualEditor_-_Icon_-_Help.svg/2000px-VisualEditor_-_Icon_-_Help.svg.png" width=15 height=15 />
    </a>
    <div class="helpbox">
        Popup #2
    </div>
</div>

更新了jsFiddle：

https://jsfiddle.net/bzrnm3y8/7/

两个DIV Popups都显示而不是一个

1 个答案: