如何從另一頁打開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;
  }

我的矮小提琴

Answer 1

我能夠使用jQuery構建部分答案。 我在頁面的標題中添加了手風琴。

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

這將使用第三個鏈接從外部頁面打開正確的手風琴面板，但是在為移動設備調整大小時，正確的手風琴不會出現在頁面頂部。

---

這有效：

正在編輯，因為我找出了答案（基於此問題的答案： 基於外部鏈接的加載頁面 ）

如果鏈接如下所示：

 <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);
});

我修改過的小提琴在這里