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>

这将打开与开放本地类同一页面上任何链接的部分：

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

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

1 个答案:

这有效：