本文介绍了两个DIV弹出显示,而不是一个的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

小提琴:

点击?时会显示弹出帮助(一个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 :

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

08-24 01:05