javascript - 如何从另一个页面打开 CSS 单选按钮 Accordion 上的特定 Accordion 部分？

Question

我在页面 (index.html) 上有链接。链接转到图库页面。我要打开的 Accordion 部分在图库页面上。

<a href="gallery#accordion1">Accordion 1</a>
<a href="gallery#openModal2">Open Model 4</a>
<a href="gallery#ac-2">Accordion 1 section 2</a>

在图库页面上，打开的 Accordion 部分内有 CSS Accordion 和 CSS 模态。

上面的第一个链接打开图库页面并将 Accordion 一个带到页面顶部，第一部分打开(默认情况下，因为它是“选中的”)。与第二个 Accordion 类似的链接也有同样的作用方式。第二个链接指向图库页面，并打开模式，如果这是我想要的，那就太好了。

但是第三个链接只会转到图库页面。它不会打开该部分，并且与另一个 Accordion 中部分的类似链接不会将该 Accordion 带到顶部。 (画廊页面也是响应式的并且有媒体查询，当我通过在点击索引页面上的链接之前缩小浏览器宽度来测试它时，它会将适当的 Accordion 带到顶部。)

我想要发生的是:单击索引页上的链接，转到图库页面，将适当的 Accordion 带到顶部并打开相应的 Accordion 部分。

我在 Stack Overflow 上查看了很多答案。最接近我正在尝试做的事情的是:Open jQuery Accordion

我也看了很多其他的，我很难弄明白的部分原因可能是我没有使用 jQuery UI 语法(header/div/header/div/etc.)

<section class="gal-container" id="accordion1">
<!--start accordion one section 1 -->
<div class="modalDialog" id="openModal1">
    <div>
        <a class="modal-close" href="#close">&times;</a> Stuff
    </div>
</div><!-- end modal one -->
<div>
    <input checked id="ac-1" name="accordion-1" type="radio"> <label for="ac-1">Title</label>
    <article>
        <a href="#openModal1">Open Modal </a>
        <p>yadda information yadda</p>
    </article>
</div><!--start accordion one section 2 -->
<div class="modalDialog" id="openModal2">
    <div>
        <a class="modal-close" href="#close">&times;</a> Stuff
    </div>
</div>
<div>
    <input id="ac-2" name="accordion-1" type="radio"> <label for="ac-2">Title</label>
    <article>
        <a href="#openModal2">Open Modal </a>
        <p>yadda information yadda</p>
    </article>
</div>

我尝试使用 javaScript 和 jQuery 来解决这个问题。我目前所做的是尝试使用特定部分的链接，将散列设为我的变量，然后选中单选按钮。

// find the id from the link
var radio = window.location.hash;
function checkRadio {
  if radio === ("ac-1" || "ac-2" || "ac-3" || "ac-4") {
  document.getElementById("accordion1").onclick = function() {
    var openAcc = window.open(this.href);
  } else {
    document.getElementByID("accordion2").onclick = function() {
      var openAcc = window.open(this.href);
    }

    // check the radio button
    document.getElementById(radio).checked = true;
  }

My Shortish fiddle

Answer 1

我能够使用 jQuery 构建部分答案。我在页面的标题中添加了它，上面有 Accordion 。

 jQuery(document).ready(function() {
// get the #section from the URL
var hash = window.location.hash; 
// open accordion
 $(hash).prop("checked", true); });

这将使用第三个链接从外部页面打开正确的 Accordion 面板，但是当为移动设备调整大小时，正确的 Accordion 面板不会出现在页面顶部。

---

这有效:

编辑是因为我找到了答案(基于这个问题的答案:Loading page based on external link)

如果链接看起来像这样:

 <a class="open-local" href="#ac-1">Item 1</a>

这将从具有 open-local 类的同一页面上的任何链接打开该部分:

  //For local link to accordion
  jQuery(document).ready(function() {
  $('a.open-local').click(function(){
// get the #section from the URL
var hash = window.location.hash; 
// open accordion
 $(hash).prop("checked", true);
 //scroll
var accordionTop =  $(hash).closest('section');
$('html, body').animate({
scrollTop: $(accordionTop).offset().top
    }, 500);
  });

对于来自外部页面的链接:

var hash = window.location.hash; 
$(hash).prop("checked", true);
var accordionTop =  $(hash).closest('section');
$('html, body').animate({
        scrollTop: $(accordionTop).offset().top
    }, 500);
});

My revised fiddle is here