jquery - JQuery toggleClass 不适用于动态数据
问题描述
从我的代码中,当我单击共享图标时,它会弹出并显示一些社交媒体共享图标。仅当单击共享图标然后单击交叉(X)图标时,切换才有效。如果我单击共享图标并单击页面上的其他位置,然后单击交叉(X)图标切换不起作用。谁能建议如何解决这个问题。
https://jsfiddle.net/n9eaojg5/22/
var courseslist = "";
for(var i=0; i<3;i++){
courseslist += "<div class='card__share'>";
courseslist += "<div class='card__social'>";
courseslist += "<a class='share-icon facebook' href='#'><span class='fa fa-facebook'></span></a>";
courseslist += "<a class='share-icon twitter' href='#'><span class='fa fa-twitter'></span></a>";
courseslist += "<a class='share-icon googleplus' href='#'><span class='fa fa-google-plus'></span></a>";
courseslist += "</div>";
courseslist += "<a id='share' class='share-toggle share-icon' href='#'></a>";
courseslist += "</div>";
courseslist += "</br>";
courseslist += "</br>";
}
$("#courseslist").html(courseslist);
$(document).ready(function () {
$('.card__share > a').on('click', function (e) {
e.preventDefault() // prevent default action - hash doesn't appear in url
$(this).parent().find('div').toggleClass('card__social--active');
$(this).toggleClass('share-expanded');
});
});
.card__share {
float:right;
position: relative;
}
.card__social {
position: absolute;
top: 0;
right: -48px;
visibility: hidden;
width: 160px;
transform: translateZ(0);
transform: translateX(0px);
transition: transform 0.35s ease;
}
.card__social--active {
visibility: visible;
transform: translateZ(0);
transform: translateX(-48px);
transition: transform 0.35s ease;
}
.share-toggle {
z-index: 2;
}
.share-toggle:before {
content: "\f1e0";
font-family: 'FontAwesome';
color: #fff;
}
.share-toggle.share-expanded:before {
content: "\f00d";
}
.share-icon {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50%;
color: white;
background-color: grey;
transition: all 0.3s ease;
outline: 0;
font-family: FontAwesome;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}
.share-icon:hover,
.share-icon:focus {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #00abe3;
}
.googleplus {
background-color: #d3492c;
}
span.facebook,
span.twitter,
span.googleplus {
color: #fff;
font-family: FontAwesome;
}
.facebook:hover,
.twitter:hover,
.googleplus:hover {
color: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="courseslist">
</div>
解决方案
问题是 z-index 不适用于position: static
. 您需要将共享切换相对定位,然后才能正常工作。
.share-toggle {
position:relative;
z-index: 2;
}
推荐阅读
- c# - 将 html 文件转换为独立的桌面应用程序
- swift - 如何使 JSON 数据持久化以供离线使用(Swift 4)
- angularjs - 在 Django 中,如何使用 angularjs 设置某个请求会话?
- swift - 当我创建一个 segue 以注销时,一个导航控制器突然出现 - Swift
- x86 - 有没有办法确定发生了 SMM 中断?
- spring - 异常连接被拒绝
- c++11 - 具有自定义键类型的 std::unordered_set 允许插入重复键
- java - Android如何限制单个应用实例?
- proof - 在 Idris 中为决策函数构建证明
- linux - 未知错误:在 ubuntu 上执行 Selenium UI 测试用例时,DevToolsActivePort 文件不存在错误