我有关于 Bootstrap 崩溃的内容，我试图改变 .pannel-heading a[aria-expanded="true]时的背景是真的。
也可以加一个<a>在这里标记并不会影响它们崩溃？
这是 HTML
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h4>title </h4>
<button class="button">Sign up</button>
<a data-toggle="collapse" data-parent="#accordion" href="#" class="" aria-expanded="true">sample text</a>
</div>
</div>
<div id="collapse-SortTechnician-1" class="panel-collapse collapse in" aria-expanded="true" style="">
<div class="panel-body">
<div class="block1 block constraint-container no-bg ">
<div class="constrain content-block clearfix">
<div class="richtext ">
<p>sample text</p>
</div>
</div>
</div>
</div>
</div>
</div>
这是我在 jQuery 中尝试过的，但还没有工作。
$(function(){
if ($('.panel-heading .panel-title > a').attr('aria-expanded') === "false") {
alert("false");
$('.panel-title').css('background','#fff');
} else if($('.panel-heading .panel-title > a').attr('aria-expanded') === "true") {
$('.panel-title').css('background','#061544');
alert('true');
}
})
这是我在 CSS 中尝试过的，但还没有奏效。
.panel-heading a[aria-expanded="true"] ~ .panel-heading{
background-color: #89c2dc;
color: #fff;
}
最佳答案
您可以尝试在代码中为 [aria-expanded="true"] 添加 css。我认为无需编写 jQuery 来更改折叠时的背景颜色。我用过bootstrap 4折叠此面板。
a.btn.btn-primary[aria-expanded="true"]{
background: red !important;
}
.btn.btn-primary,.btn.btn-primary:focus,.btn.btn-primary:active {
border:0;
box-shadow:none;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="mt-2">
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<a class="btn btn-primary" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</a>
<div class="row">
<div class="col-12">
<div class="collapse multi-collapse" id="multiCollapseExample1">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div class="col-12">
<div class="collapse multi-collapse" id="multiCollapseExample2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>关于jquery - if aria-expanded="true 改变其他元素样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52176607/