如何在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手风琴。

上面的第一个链接打开画廊页面，并将accordion one带到页面的顶部，第一部分打开(默认情况下，因为它是“选中”的)。指向第二个手风琴的类似链接也以同样的方式工作。第二个链接指向画廊页面，并打开模式，如果这是我想要的，那就太好了。

但第三个链接只会转到画廊页面。它不会打开该部分，并且指向另一个手风琴中的部分的类似链接也不会将该手风琴带到顶部。(画廊页面也具有响应性，并具有媒体查询，当我在单击索引页面上的链接之前缩小浏览器宽度进行测试时，媒体查询会将相应的折叠面板置于顶部。)

我想要发生的是:点击首页上的链接，转到画廊页面，将适当的折叠带到顶部，并打开相应的折叠部分。

我看过很多关于Stack Overflow的答案。与我要做的事情最接近的是：Open jQuery Accordion

我还看了很多其他的，我很难弄清楚这一点的部分原因可能是我没有使用jQuery UI语法(header/div/header/div/等)。

<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