If aria-extended = "true изменить стиль другого элемента

У меня есть содержимое коллапса 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;
}

jquery html css bootstrap-4

05.09.2018 05:26

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

10 866

Ответы 2

Вы можете попробовать добавить css для [aria-expanded = "true"] в свой код. Думаю, нет необходимости писать jQuery для изменения цвета фона при сворачивании. Я использовал коллапс бутстрап 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>

Спасибо за ответ на мой вопрос, но у меня есть лишний `<div class = " pannel-title ">`, не совсем то же самое с кодом коллапса по умолчанию bootstrap 4, так что у меня это не работает. Спасибо.

— 10.09.2018 00:03

05.09.2018 06:22

Вы можете попробовать это, чтобы изменить цвет фона заголовка

$(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')
    }
});

Спасибо, что ответили на мои вопросы.

— 09.06.2019 18:33

05.09.2018 06:40