Question

我有一个关于jquery父母的问题。

我是从 codepen.io

创建的 DEMO

在此演示中，您可以看到有一个树链接显示div ，显示div2 和显示div3 。如果单击显示div ，则jquery代码将打开.popup和.openingdiv，但其他链接在同一代码中不起作用。有人可以帮我吗？

$(document).ready(function() {
$('.click').click(function (e) {
    e.preventDefault();
   $('.popup').animate({'opacity':'.50'}, 300, 'linear');
   $('.popup').css('display', 'block');
   $(this).parent().next('.openingdiv').toggleClass('height');
     $(this).toggleClass('zindex');

  $('.closediv a').click(function(e){
    e.preventDefault();
    $('.popup').animate({'opacity':'.50'}, 500, 'linear');
   $('.popup').css('display', 'none');
    $(this).closest('.openingdiv').removeClass('height');
  });
})
  $('.click2').click(function (e) {
    e.preventDefault();
   $('.popup').animate({'opacity':'.50'}, 300, 'linear');
   $('.popup').css('display', 'block');
   $(this).parent().next('.openingdiv2').toggleClass('height');
     $(this).toggleClass('zindex');

  $('.closediv2 a').click(function(e){
    e.preventDefault();
    $('.popup').animate({'opacity':'.50'}, 500, 'linear');
   $('.popup').css('display', 'none');
    $(this).closest('.openingdiv2').removeClass('height');
  });
})

});

HTML

<div class="container">
  <div class="click"><a href="#">Show Div</a></div>
  <div class="click2"><a href="#">Show Div2</a></div>
  <div class="click3"><a href="#">Show Div3</a></div>
</div>
<div class="openingdiv">
  <div class="closediv"><a href="#">close</a></div>
</div>
<div class="openingdiv2">
  <div class="closediv2"><a href="#">close2</a></div>
</div>
<div class="openingdiv3">
  <div class="closediv3"><a href="#">close3</a></div>
</div>

<div class="popup"></div>

Answer 1

请在此处查看此笔。它使用.on（）来绑定事件

http://codepen.io/anon/pen/NPdgmK（更新）

<html>
  <div class="container">
    <div class="click button" data-opener="1"><a href="#">Show Div</a></div>
    <div class="click2 button" data-opener="2"><a href="#">Show Div2</a></div>
    <div class="click3 button" data-opener="3"><a href="#">Show Div3</a></div>
  </div>
  <div class="openingdiv1 opener">
    <div class="closediv closer"><a href="#">close</a></div>
  </div>
  <div class="openingdiv2 opener">
    <div class="closediv closer"><a href="#">close2</a></div>
  </div>
  <div class="openingdiv3 opener">
    <div class="closediv closer"><a href="#">close3</a></div>
  </div>

  <div class="popup"></div>

</html>

<style>


.container{
  width:540px;
  height:auto;
  margin:0px auto;
  margin-top:50px;
}
.click{
  float:left;
  width:64px;
  height:64px;
  border:1px solid #d8dbdf;
  font-size:13px;
  font-weight:bold;
  font-family:arial,sans-serif;
  text-align:center;
  line-height:64px;
}
.click2{
  float:left;
  width:69px;
  height:64px;
  border:1px solid #d8dbdf;
  font-size:13px;
  font-weight:bold;
  font-family:arial,sans-serif;
  text-align:center;
  line-height:64px;
  margin-left:10px;
  margin-right:10px;
}
.click3{
  float:left;
  width:69px;
  height:64px;
  border:1px solid #d8dbdf;
  font-size:13px;
  font-weight:bold;
  font-family:arial,sans-serif;
  text-align:center;
  line-height:64px;

}
.popup {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:#000;
  opacity: .0;
  filter:alpha(opacity=0);
  z-index:300;
  display:none;
}
.opener {
  float:left;
  width:540px;
  height:0;
  border:1px solid #d8dbdf;
  z-index:999;
  position: relative;
  overflow: hidden;
  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
  background-color: #ffffff;
}
.opener.height {
  height: 200px;
}

.zindex {
   z-index:9999;
   position:relative;   
}
.closer {
  padding:15px;
  float:right;
  margin:0px;
  position:absolute;
  bottom:0px;
  right:0px;
}
.closer a {
  text-decoration:none;
  color:#000;
  font-weight:bold;
  font-size:13px;
  font-family:arial,sans-serif;
}
</style>

<script>
$(document)
  .on('click','.button',function (event) {
    event.preventDefault();
    var opener = $(this).data('opener');
    $('.popup').animate({'opacity':'.50'}, 300, 'linear');
    $('.popup').css('display', 'block');
    $('.openingdiv'+opener).addClass('height');
    //$(this).toggleClass('zindex');
  })

  .on('click','.closediv a',function (event) {
    event.preventDefault();
    $('.popup').animate({'opacity':'.50'}, 500, 'linear');
    $('.popup').css('display', 'none');
    $(this).closest('.opener:visible').removeClass('height');
  })

; // $(document)
</script>

Answer 2

因为你已经使用了

$('.popup').css('display', 'block');

你可以使用＆＃39; none＆＃39;为了激活其他链接或完全以另一种方式写它？

Jquery父母不工作

2 个答案: