如何从另一个页面打开 CSS 单选按钮手风琴上的特定手风琴部分？

Question

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

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

在图库页面上，打开的手风琴部分中有 CSS 手风琴和 CSS 模态。

上面的第一个链接打开画廊页面并将手风琴放在页面顶部，第一部分打开（默认情况下，因为它被“选中”。）到第二个手风琴的类似链接也可以使用相同的方法大大地。第二个链接指向图库页面，并打开模式，如果这是我想要的，那就太好了。

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

我想要发生的是：点击索引页面上的链接，进入图库页面，将相应的手风琴带到顶部并打开相应的手风琴部分。

我在 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 构建部分答案。我在页面的标题中添加了这个，上面有手风琴。

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

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

---

这行得通：

编辑因为我想出了答案（基于这个问题的答案：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