两个DIV弹出显示，而不是一个 [英] Both DIV Popups Shown Instead of One

问题描述

小提琴： https://jsfiddle.net/bzrnm3y8/6/

点击？时会显示弹出帮助（一个DIV段落）。我有缓动JS功能的这个例子，但我不完全明白它是如何工作的。

Popup help is shown (a DIV paragraph) on clicking '?'. I got this example with the "easing" JS function, but I don't fully understand how it works.

CSS样式影响所有帮助框，我希望所有的人都一致打开/关闭，只有被点击的特定的。我不想把每一个这些特定的CSS样式或#ID。

The CSS style affects all help boxes, but I don't want all of them to open/close in unison, only the specific one that was clicked. I don't want to pin each one of these to a specific CSS style or #ID. Right now they all open up based on the CSS style.

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);
};

任何想法？

推荐答案

您当前的代码显然会显示两个帮助框，因为您直接定位一个类，两个帮助框包含，你应该将两个帮助框包装在不同的div与？ 图标，然后使用 siblings（）函数显示和隐藏特定 code>

Your current code will obviously show both of the helpbox as you are targeting directly an class which both of the helpboxes contain , You should wrap both of the helpbox in different divs along with ? icon , and then use siblings() function from jquery to show and hide the help box for the specific ?

让我们在行内 div有2个元素

let say , inside a row div there are 2 elements

• Helpbox图示


• Helpbox文字容器

在这种情况下，Helpbox文本容器是Helpbox图标的同级，所以您可以使用 siblings 函数，通过将它们包含在父 div

in this case Helpbox text container is a sibling of Helpbox icon so you can use the siblings function to make it possible by wrapping them inside a parent div

请参阅下文：

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

javascript：

javascript:

<script>
    $(function () {
        $('.helpicon').on('click', function () {
            if ($(this).hasClass('selected')) {
                $(this).siblings('.helpbox').slideToggle();
            } else {
                $(this).addClass('selected');
                $(this).siblings('.helpbox').slideToggle();
            }
            return false;
        });

    });
</script>

已更新jsFiddle：

updated jsFiddle :

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

这篇关于两个DIV弹出显示，而不是一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！