if aria-expanded="true 改变其他元素样式答案

【问题标题】：if aria-expanded="true change other element styleif aria-expanded="true 改变其他元素样式
【发布时间】：2019-02-10 02:18:24
【问题描述】：

我有关于 Bootstrap 折叠的内容，当a[aria-expanded="true] 为真时，我尝试更改.pannel-heading 背景。

也可以在这里再添加一个<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;
}

【问题讨论】：

标签： jquery html css bootstrap-4

【解决方案1】：

您可以尝试在代码中为[aria-expanded="true"] 添加css。我认为不需要编写 jQuery 来更改折叠时的背景颜色。我在这个面板中使用了bootstrap 4collapse。

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>

【讨论】：

感谢您回答我的问题，但我有额外的 `
` 与 bootstrap 4 默认折叠代码不太一样，所以这对我不起作用。谢谢。

【解决方案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')
    }
});

【讨论】：

感谢您回答我的问题。