Изменить tabindex в зависимости от того, открыт ли или закрыт элемент данных

Question

Я новичок в jQuery и некоторое время боролся с этим и буду очень признателен за любую помощь.

У меня есть элемент подробностей, который содержит ссылку в содержании, и я хочу переключать tabindex в зависимости от того, открыт ли элемент подробностей или нет.

вот мой html для элемента

<details role="group">
 <summary role="button" aria-controls="details-content-1" aria-expanded="false">
  <span class="summary">Details element that contains a link</span>
 </summary>
 <div class="content-panel" id="details-content-1">
  <p><a href="#" rel="noopener" target="_blank">Find out more</a>.</p>
 </div>
</details>

И у меня есть этот jQuery, который устанавливает tabindex равным -1 и переключает его при открытии деталей.

    $(document).ready(function() {

      var linkIndex = "div.content-panel > p > a";

      $(linkIndex).attr("tabindex", "-1");
      $("details").click( function() {
        if ($ (linkIndex).attr("tabindex") == -1) {
          $ (linkIndex).attr("tabindex", 0);
        } else {
          $ (linkIndex).attr("tabindex", -1);
        }
      });
    });  

Проблема, с которой я столкнулся, заключается в том, что у меня более одного элемента сведений, содержащего ссылку на страницу. Если я щелкну один из них, он также переключит ссылку в другом элементе сведений. Есть ли способ заставить его сфокусироваться на детях из деталей, по которым щелкнули?

Спасибо

Answer 1

Если у вас их несколько, вы можете сделать это следующим образом:

$(document).ready(function() {

  var linkIndex = "div.content-panel > p > a";

  $(linkIndex).attr("tabindex", "-1");
  $("details").click(function() {
    var content = $(this).find(linkIndex);
    if (content.attr("tabindex") == -1) {
      content.attr("tabindex", 0);
    } else {
      content.attr("tabindex", -1);
    }
  });
});

Обратите внимание, что я изменил "div.panel > p > a"; на "div.content-panel > p > a";

демо

$(document).ready(function() {

  var linkIndex = "div.content-panel > p > a";

  $(linkIndex).attr("tabindex", "-1");
  $("details").click(function() {
    var content = $(this).find(linkIndex);
    if (content.attr("tabindex") == -1) {
      content.attr("tabindex", 0);
    } else {
      content.attr("tabindex", -1);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details role="group">
  <summary role="button" aria-controls="details-content-1" aria-expanded="false">
    <span class="summary">Details element that contains a link</span>
  </summary>
  <div class="content-panel" id="details-content-1">
    <p><a href="#" rel="noopener" target="_blank">Find out more</a>.</p>
  </div>
</details>

<details role="group">
  <summary role="button" aria-controls="details-content-2" aria-expanded="false">
    <span class="summary">Details element that contains a link</span>
  </summary>
  <div class="content-panel" id="details-content-2">
    <p><a href="#" rel="noopener" target="_blank">Find out more</a>.</p>
  </div>
</details>

Answer 2

вы можете использовать .find(), чтобы получить дочерний элемент a, а затем обновить tabindex. Вы использовали div.panel вместо div.content-panel, пожалуйста, исправьте либо в jquery, либо в html.

см. Код ниже

$(document).ready(function() {

      var linkIndex = "div.content-panel > p > a";

      $(linkIndex).attr("tabindex", "-1");
      $("details").click( function() {
        var $anchor = $(this).find('div.content-panel > p > a');
        if ($anchor.attr("tabindex") == -1) {
          $anchor.attr("tabindex", 0);
        } else {
          $anchor.attr("tabindex", -1);
        }
      });
    })

;