Question

要求是用户可以点击黑框显示橙色框，点击橙色框显示红色框，但应隐藏橙色框和红色框当用户点击文档的任何地方，橙色框或红盒本身。

但目前问题是我们无法点击橙色框来显示红色框

非常感谢你能帮助我，非常感谢

演示链接：http://plnkr.co/edit/OqlfbmFPKdXx0wDhnLxZ?p=preview

$(function() {

  $('#mypop').click(function(e) {
    event.stopPropagation();
  });

  $(document).on('click', '#myclick', function() {
    $('#mypop').toggle();

    $(document).one('click', function() {
      $('#mypop').hide();
    });
  });

  $(document).on('click', '#myclick1', function() {
    $('#mypop2').show();
  });


  $(document).on('click', '#myclick2', function() {
    $('#mypop2').show();
  });

})()

#mypop {
  background-color: orange;
  position: absolute;
  top: 130px;
  left: 50px;
  width: 150px;
  padding: 15px;
}

.mydiv {
  background-color: black;
  padding: 30px;
  width: 50px;
  cursor: pointer;
  color: white;
}

#mypop2 {
  margin-top: 150px;
  background-color: red;
  width: 100px;
  height: 50px;
  padding: 18px;
  display: none;
}

#myclick1,
#myclick2 {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myclick" class='mydiv black-box'>
  click me!
</div>

<div id="mypop" style="display:none;" class='orange-box'>

  <p>hello world</p>
  <div id='myclick1'>BUTTON1</div>
  <div id='myclick2'>BUTTON2</div>
</div>

<div id="mypop2" class='red-box'>
  Hello World!!!
</div>

Answer 1

试试这个。我认为这是你的例外，但我不确定，因为你一直在编辑你的问题。

演示链接：http://plnkr.co/edit/n7rdgqTwiFrXtpgoX4TQ?p=preview

   $('#myclick1').click(function(){
        $('#mypop2').show();
    });


    $('#myclick2').click(function(){
      $('#mypop2').show();
    });

Answer 2

你混淆了几件事。

主停止点是第一个事件侦听器

owl.theme.default.min.css

与其他听众不兼容

$('#mypop').click(function(e) {

我把它改成

之后

$(document).on('click','#myclick1',function(e){

其他听众已经开始工作了。

第二个的事情是，对于嵌入式元素（父子），您需要停止事件传播，否则父事件也会被触发（这是不可取的）

$(document).on('click','#mypop', function(e){

我还更改了CSS并添加了类$(document).on('click','#myclick1',function(e){ e.stopPropagation(); : });来代替样式。切换这个类是隐藏和显示元素。

Jquery点击弹出div来显示另一个div

2 个答案: