Transformicons - Значок скрыт за наложением
Я играл с 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 (), значок за пределами наложения должен быть скрыт, чтобы был виден только один значок.
После закрытия наложения значок преобразования должен снова отобразить знак «+». Хотел бы некоторые мысли о том, как лучше всего этого добиться. Спасибо.
Большое спасибо @ ecg8. Оно работает! Свойство z-index - отличный совет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
добавьте "position: relative" и "z-index: 2" в CSS вашего # transformicon.