Question

我在Bootstrap中包含折叠内容，当.pannel-heading为true时，我尝试更改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;
}

Answer 1

您可以尝试在代码中为[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>

Answer 2

您可以尝试更改标题背景颜色

$(document).ready(function () {
    var anchorElement = $(".panel-heading .panel-title > a");
    if (anchorElement.attr("aria-expanded") == "true") {
        $(anchorElement).closest(".panel-title").css("background-color", '#061544')
    } else {
        $(anchorElement).closest(".panel-title").css("background-color", '#ffffff')
    }
});

如果aria-expanded =“ true更改其他元素样式

2 个答案: