个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 00:43:25 26 4
gpt4 key购买 nike

我一直在玩弄 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/

26 4 0
文章推荐： css - 空格在 CSS 选择器中意味着什么？即.classA.classB 和.classA .classB 之间有什么区别？
文章推荐： javascript - 我可以使用::before content 使 div 成为可点击的链接吗？
文章推荐： html - 如何在 Windows 操作系统中隐藏垂直滚动条
文章推荐： c++ - 使用 boost::bind 和 boost::static_pointer_cast 转换 boost::shared_ptr 的 vector
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com