问根据详细信息元素是打开还是关闭而更改表索引
EN

Stack Overflow用户

提问于 2019-10-07 02:54:12

回答 2查看 94关注 0票数 0

我是jQuery的新手，在这方面我已经挣扎了一段时间了，我真的很感激你的帮助。

我有一个details元素，它在内容中包含一个链接，我想要切换表索引，这取决于是否打开或关闭了details元素。

这是元素的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，它将表索引设置为-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);
        }
      });
    });

我遇到的问题是，当我有多个包含页面链接的详细信息元素时。如果我单击其中一个，它还会在其他details元素中切换链接。有没有办法让它专注于被点击的细节的孩子？

谢谢

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-10-07 02:58:58

可以使用.find()获取子a元素，然后更新表索引。您已经使用了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);
        }
      });
    })

；

票数 0

Stack Overflow用户

发布于 2019-10-07 02:59:03

如果你有多个，你可以这样做：

$(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>