Aitzaz Ahsan Ответов: 0

Как установить значение атрибута aria-expanded="true" с помощью java-скрипта

<div id="accordion" role="tablist">  
  <div class="card">  
    <div class="card-header" role="tab" id="headingOne">  
      <h5 class="mb-0">  
        <a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">  
          Collapsible Group Item #1  
        </a>  
      </h5>  
    </div>  

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">  
      <div class="card-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>  
    </div>  
  </div>  
  <div class="card">  
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">  
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">  
          Collapsible Group Item #2
        </a>  
      </h5>  
    </div>  
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">  
      <div class="card-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>  
    </div>  
  </div>  
  <div class="card">  
    <div class="card-header" role="tab" id="headingThree">  
      <h5 class="mb-0">  
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">  
          Collapsible Group Item #3  
        </a>  
      </h5>  
    </div>  
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">  
      <div class="card-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>  
    </div>  
  </div>  
</div>


Что я уже пробовал:

когда кто-то нажимает на меню collpase, я сохраняю его идентификатор в файле cookie, используя java-скрипт, подобный этому
$(function () {
       $('.card-header .collapsed').on('click', function () {
               //set cookie for current index on change event
             alert($.cookie('saved_index', $(this).attr('href')));
       });


когда я загружаю страницу, Я проверяю идентификатор при загрузке страницы и пытаюсь установить значение aria-expanded="true" с помощью этого метода 
$(document).ready(function () {

       //var getSessionValue = $.cookie('saved_index', $(this).attr('id'));;
       var getSessionValue = $.cookie('saved_index', $(this).attr('href'));
       if (getSessionValue) {
        $(getSessionValue).attr("aria-expanded", "true");

   }
   );

но я не могу установить aria-expanded="true" любезно, никто не может помочь мне в этом вопросе.
Действительно очень благодарен всем.

Chris Copeland

Вы пробовали отладить это в своем браузере и посмотреть, что произойдет? Вы уверены, что ценность getSessionValue содержит ожидаемый идентификатор элемента?

Я быстро проверил, что там такое. $.cookie функция делает и по-видимому, чтобы читать значение файла cookie, которое вы не должны передавать в другом аргументе, отличном от имени файла cookie. Поэтому я ожидаю, что ваш код будет читать var getSessionValue = $.cookie('saved_index');

Aitzaz Ahsan

Я получаю значение в следующем getSessionValue = $.cookie('saved_index', $(this).attr('href')); но я не могу получить aria-expanded="true"

Chris Copeland

Вы подтвердили, что значение getSessionValue соответствует идентификатору элемента, который вы пытаетесь обновить?

Если вы используете более свежую версию jQuery, вы также можете попробовать использовать $(getSessionValue).prop('aria-expanded', 'true'); что, по-видимому, является предпочтительным выбором для получения/настройки атрибутов элементов.

0 Ответов