Question

所以，我遇到了一个新问题...

我想要＆＃39;叠加＆＃39;在网站加载时显示div，当按下时，它会消失，并显示“暂停”状态。 DIV。而当“暂停”时然后按下div，我需要＆＃39; overlay＆＃39; div来回来。脚本当前如下所示;

脚本：

    $(function() {
  $(document).on("click",function (e) {
    if (e.target.id=="pause") {
      $("#overlay").fadeToggle(500);
      e.stopPropagation();
      return true;
    }
    else if ($("#overlay").is(":visible")) {
      $("#pause").fadeOut(500);
    }

    else if ($("#pause").is(":visible")) {
      $("#overlay").fadeOut(500);
    }
  });
});

HTML：

<div id="overlay">
        <div class="play">
            <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();">
        </div>
    </div>
    <div id="pause">
        <img src="pause.png" style="height: 100%;">
    </div>

JSFiddle：https://jsfiddle.net/owr0sv8m/

帮助会很精彩，因为我还是剧本的新手......

提前致谢！ /克里斯

Answer 1

我认为你正在尝试做这样的事情

＆＃13;

var overlay = document.querySelector("#overlay");

function toggleClass() {
  this.classList.toggle("active")
}

overlay.addEventListener("click", toggleClass, false);

＆＃13;

#overlay .pause{
  display: none
}
#overlay.active .play{
  display: none
}
#overlay.active .pause {
  display: block
}

＆＃13;

<div id="overlay" class=active>
  <div class="play">
    <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();">
    <caption>Play</caption>
  </div>
  <div class="pause">
    <img src="pause.png" style="height: 100%;">
    <caption>Pause</caption>
  </div>
</div>

＆＃13;

但如果不试试这个

＆＃13;

var overlay = document.querySelector("#overlay"),
  pause = document.querySelector("#pause");

function toggleClassOnPause() {
  pause.classList.contains("active") ? pause.classList.remove("active") : overlay.classList.add("active");
  overlay.classList.add("active")
}

function toggleClassOnOverlay() {
  overlay.classList.contains("active") ? overlay.classList.remove("active") : overlay.classList.add("active");
  pause.classList.add("active")
}

pause.addEventListener("click", toggleClassOnPause, false);
overlay.addEventListener("click", toggleClassOnOverlay, false);

＆＃13;

#pause,
#overlay {
  display: none
}
#pause.active,
#overlay.active {
  display: block
}

＆＃13;

<div id="overlay" class=active>
  <div class="play">
    <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();">
    <caption>Overlay</caption>
  </div>
</div>
<div id="pause">
  <img src="pause.png" style="height: 100%;">
  <caption>Pause</caption>
</div>

＆＃13;

Answer 2

检查这个小提琴并根据您的需要采用它。很短很甜蜜。

HTML：

<div id="overlay" style="width: 100%; height: 100%; background-color: #f0f0f0">
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red">
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a>
</div>
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red">
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a>
</div>
</div>

<div id="pause" style="width: 100%; height: 100%; background-color: #f0f0f0">
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: gray">
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a>
</div>
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: gray">
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a>
</div>
</div>

的CSS：

.visibleb {
  display:block !important;
}
#overlay,#pause {
  display:none;
}

javascript：

       $(document).ready(function() {
       $('#overlay').addClass('visibleb');

       $(document).on("click",function (e) {
       $('#pause').toggleClass('visibleb');
       $('#overlay').toggleClass('visibleb');
              e.preventDefault();

    });

});

https://jsfiddle.net/kodedsoft/bm4hhfsd/2/

Div点击消失

2 个答案: