Question

我一直在玩Zerodevx Transformicon，在其中图标被转换为次要版本（在本例中为减号）时，Transformicons添加了一个类（tcon-transform）。

在单击“ +”图标时，将调用open()函数以打开叠加层。单击“-”图标后，将调用closeNav()函数以关闭叠加层。

打开叠加层后，“-”图标将被禁用，因为它位于叠加层的后面。请参阅此代码段作为示例以供参考

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 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;
}

#transformicon {
  float: right;
}

<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>
  <div id="transformicon">
    <zero-transformicon icon="plus-minus" onclick="openNav()">

    </zero-transformicon>
  </div>
  <div id="myNav" class="overlay"></div>
</body>

我正在考虑如何解决这个问题。一种方法可能是在覆盖内添加另一个图标，其功能与覆盖外的图标相同。单击“ +”时，将在覆盖层内打开覆盖层，并在覆盖层内调用“ closeNav（）函数”，隐藏覆盖层外的图标，以便仅显示一个图标。

关闭覆盖后，transformicon应再次显示“ +”号。希望对实现此目标的最佳方法有所想法。谢谢。

Transformicons-图标隐藏在叠加层后面

0 个答案: