第一次单击时展开div，第二次单击时使用jQuery淡出div

debugcn 发表于 Dev

崔oe

我想使div在第一次单击时扩展到全屏，并在第二次单击时使用jQuery淡出，我同时编写了扩展效果和淡出效果，但是当我单击div时，两个效果同时发生。如何在不同的点击次数上触发不同的事件？（只需单击两次）

这是我的JS：

$(document).ready(function() {

$('.p1').click(function(e) {
    $('.title').toggleClass('fullscreen');
});

$(".p1").click(function(e) {
    $(".title, .p1").fadeOut(1000);

});

这是我的html：

 <div class="container">

    <div class="blur title">

    </div>
    <p class=p1>IN </br> PRAISE </br> OF SHADOWS</p>

</div>

上面的问题已经解决，但是我的项目实际上有一个以上的div：

<div class="container">

    <div class="blur title"></div>
    <p class="p1">IN </br> PRAISE </br> OF SHADOWS</p>



    <div class="blur author"></div>
    <p class="p2">JUNICHI</br>RO</br>TANI</br>ZAKI</p>

</div>

在这种情况下，如何将效果应用于多个div？我尝试了这个，但是我不认为这应该起作用：

$(document).ready(function() {
let clickCount = 0;

$('.p1').click(function(e) {
    if (clickCount % 2 == 0) {
        $('.title,').toggleClass('fullscreen');
    } else {
        $(".title, .p1").fadeOut(1000);
    }
    clickCount++;
});

$('.p2').click(function(e) {
    if (clickCount % 2 == 0) {
        $('.author').toggleClass('fullscreen');
    } else {
        $(".author, .p2").fadeOut(1000);
    }
    clickCount++;
});

谢谢你的帮忙！！！！

尼采什

如果您有多个包含其内容的容器，则可以在单击时设置每个父元素的属性，并相应地设置子节点的可见性。

请在下面找到一个样本。

$(document).ready(function() {
  let clickCount = 0;
  $('.p1').click(function(e) {
    const attr = e.target.getAttribute('clickedonce');
    const closestNode = e.target.closest('.container');
    if (attr) {
      e.target.setAttribute('clickedonce', false);
      $(closestNode).find('.title').fadeOut(1000);
      $(closestNode).find('.p1').fadeOut(1000);
    } else {
      $(closestNode).find('.title').toggleClass('fullscreen');
      // Set a custom attribute to the parent node
      e.target.setAttribute('clickedonce', true);
    }    
  });
});

.fullscreen {
  border: 1px solid red;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="container">
  <div class="blur title">
    Container 1
  </div>
  <p class="p1">
    IN Container 1
    </br>
    PRAISE
    </br>
    OF SHADOWS
  </p>
</div>

<div class="container">
  <div class="blur title">
    Container 2
  </div>
  <p class="p1">
    IN Container 2
    </br>
    PRAISE
    </br>
    OF SHADOWS
  </p>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。