2021-10-07
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.demo-btn {
background-color: transparent;
border: unset;
color: black;
font-size: 16px;
height: 50px;
width: 50px;
}
.btn-click {
color: red !important;
font-size: 20px !important;
}
.glyphicon-heart{
color: red !important;
}
</style>
</head>
<body>
<!--<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="demo-btn left-btn glyphicon glyphicon-thumbs-up">
</button>
<button type="button" class="demo-btn bottom-btn glyphicon glyphicon-thumbs-up">
</button>
<button type="button" class="demo-btn right-btn glyphicon glyphicon-thumbs-up" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right" data-trigger="manual"
data-content="右侧的 Popover 中的一些内容">
</button>
</div>-->
<button type="button" class="demo-btn left-btn glyphicon glyphicon-thumbs-up" onclick="btnClick()">
</button>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body" style="overflow: auto; height: 500px;width: 500px">
<ul class="message-ul-content list-group" style="width: 100px">
<!-- <li class="list-group-item row">
<span class="text-content col-md-10" style="word-break: break-word ;padding: 0 5px 0 0">列表1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="like-btn col-md-2 glyphicon glyphicon-heart-empty" style="padding: unset"
οnclick="likeBtnFun(this)"/>
</li>
<li class="list-group-item row">
<span class="text-content col-md-10" style="word-break: break-word ;padding: 0 5px 0 0">列表1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="like-btn col-md-2 glyphicon glyphicon-heart-empty" style="padding: unset"
οnclick="likeBtnFun(this)"/>
</li>
<li class="list-group-item row">
<span class="text-content col-md-10" style="word-break: break-word ;padding: 0 5px 0 0">列表1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="like-btn col-md-2 glyphicon glyphicon-heart-empty" style="padding: unset"
οnclick="likeBtnFun(this)"/>
</li>
<li class="list-group-item row">
<span class="text-content col-md-10" style="word-break: break-word ;padding: 0 5px 0 0">列表1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="like-btn col-md-2 glyphicon glyphicon-heart-empty" style="padding: unset"
οnclick="likeBtnFun(this)"/>
</li>
<li class="list-group-item row">
<span class="text-content col-md-10" style="word-break: break-word ;padding: 0 5px 0 0">列表1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="like-btn col-md-2 glyphicon glyphicon-heart-empty" style="padding: unset"
οnclick="likeBtnFun(this)"/>
</li>
<li class="list-group-item row">
<span class="text-content col-md-10" style="word-break: break-word ;padding: 0 5px 0 0">列表1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="like-btn col-md-2 glyphicon glyphicon-heart-empty" style="padding: unset"
οnclick="likeBtnFun(this)"/>
</li>-->
</ul>
<div id="message-content" hidden>
<li class="list-group-item row">
<span class="text-content col-md-10" style="word-break: break-word ;padding: 0 5px 0 0">列表1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span class="like-btn col-md-2 glyphicon glyphicon-heart-empty" style="padding: unset"
onclick="likeBtnFun(this)"/>
</li>
</div>
</div>
</div>
<!--<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>-->
</body>
<script>
$(function () {
$("[data-toggle='popover']").popover();
$(".left-btn").on("click", function () {
if (!$(this).hasClass("btn-click")) {
$(this).addClass("btn-click");
$(".bottom-btn").removeClass("btn-click");
$(".right-btn").removeClass("btn-click");
$(".right-btn").popover("hide");
//$("[data-toggle='popover']").popover('toggle')
} else {
$(this).removeClass("btn-click");
}
})
$(".bottom-btn").on("click", function () {
if (!$(this).hasClass("btn-click")) {
$(this).addClass("btn-click");
$(".left-btn").removeClass("btn-click");
$(".right-btn").removeClass("btn-click");
$(".right-btn").popover("hide");
} else {
$(this).removeClass("btn-click");
}
})
$(".right-btn").on("click", function () {
if (!$(this).hasClass("btn-click")) {
$(this).addClass("btn-click");
$(".bottom-btn").removeClass("btn-click");
$(".left-btn").removeClass("btn-click");
$(".right-btn").popover("show");
} else {
$(this).removeClass("btn-click");
$(".right-btn").popover("hide");
}
})
});
function likeBtnFun(t) {
$(".glyphicon-heart").each(function (){
if (!$(this).is($(t))){
$(this).removeClass("glyphicon-heart");
$(this).addClass("glyphicon-heart-empty");
}
})
if ($(t).hasClass("glyphicon-heart")){
$(t).removeClass("glyphicon-heart");
$(t).addClass("glyphicon-heart-empty");
} else{
$(t).removeClass("glyphicon-heart-empty");
$(t).addClass("glyphicon-heart");
}
}
function btnClick(){
for (let i=0;i<10;i++){
$("#message-content").find(".text-content").html("列表啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊"+i);
$(".message-ul-content").append($("#message-content").html());
}
}
</script>
</html>
标签：glyphicon,10,07,heart,removeClass,2021,popover,btn,click 来源： https://blog.csdn.net/m0_37321285/article/details/120643278