jquery - Transformicons - 打开/关闭覆盖内容-6ren

jquery - Transformicons - 打开/关闭覆盖内容

转载作者：行者123 更新时间：2023-11-28 00:43:25

我一直在玩弄 Zerodevx transformicon 并且我不确定如何在切换动画后显示叠加层的内容。

这是代码片段。

function openNav() {
  document.getElementById("myNav").style.left = "50%";
}

function closeNav() {
  document.getElementById("myNav").style.left = "100%";
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  float: right;
  position: relative;
  top: 15%;
  width: 50%;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: black;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

<!DOCTYPE html>
<html>

<head>
  <!-- Import webcomponents-lite.js polyfill -->
  <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>

  <!-- Import zero-transformicon build bundle -->
  <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">


</head>

<body>
  <zero-transformicon icon="plus-minus" onclick="openNav()"></zero-transformicon>
  <span style="float:right;" onclick="openNav()">&#8641;open</span>
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
</a>
    <div class="overlay-content">
      <div class="text-block">
        <h1>"Fever" T-shirt</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</body>

</html>

有两个函数 openNav() 和 closeNav() 打开和关闭叠加层。

我已经调用了 openNav() 函数来打开叠加层，但我有点困惑，因为当您单击“减号”动画图标时我将如何放置 closeNav() 函数。

我希望在单击“+”图标时显示叠加层，并在图标以“-”状态动画显示时通过单击关闭叠加层。

“-”图标应包含在叠加层中 - 类似于叠加层中关闭“X”按钮的方式。

最佳答案

我正在查看 Transformicons 的文档，但找不到检测转换开始/结束事件的方法(也许我正在查看旧版本？我发现的内容在 Github 上被列为已弃用)。

仍然，Transformicons 似乎添加了一个类 (tcon-transform) 当图标转换为次要版本时(在本例中为减号)。您可以在 openNav() 中使用它来检测图标的状态并执行一个或另一个操作。像这样的东西(评论):

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";
  } else {
    // the original icon was the minus: close the navigation
    closeNav();
  }
}

你可以看到它在这里工作:

function openNav() {
  if (event.target.classList.contains("tcon-transform")) {
    document.getElementById("myNav").style.left = "50%";
  } else {
    closeNav();
  }
}

function closeNav() {
  document.getElementById("myNav").style.left = "100%";
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  float: right;
  position: relative;
  top: 15%;
  width: 50%;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: black;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

<!DOCTYPE html>
<html>

<head>
  <!-- Import webcomponents-lite.js polyfill -->
  <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>

  <!-- Import zero-transformicon build bundle -->
  <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">


</head>

<body>
  <zero-transformicon icon="plus-minus" onclick="openNav()"></zero-transformicon>
  <span style="float:right;" onclick="openNav()">&#8641;open</span>
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
</a>
    <div class="overlay-content">
      <div class="text-block">
        <h1>"Fever" T-shirt</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</body>

</html>

关于jquery - Transformicons - 打开/关闭覆盖内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53678493/

文章推荐： html - 如何在 Windows 操作系统中隐藏垂直滚动条

jquery - Navicon Transformicons 蓝色边框
我在玩 sara soueidan导航图标，分析后还有一些我不太明白的地方。那些我似乎无法删除的图标周围有一个蓝色选择器，这是他的方法特有的还是对 jquery 的简单误解？这是代码 http:/
jquery - Transformicons - 打开/关闭覆盖内容
我一直在玩弄 Zerodevx transformicon 并且我不确定如何在切换动画后显示叠加层的内容。这是代码片段。 function openNav() { document.getEle

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - Transformicons - 打开/关闭覆盖内容