Javascript JQuery Accordian-使用URL在DIV中展开DIV

我一直在用这个来敲打我的头，我上下搜索了堆栈溢出和其他地方。我找到的最接近的答案是，但我无法让它与我的网站一起工作

我想从另一个页面/站点输入一个带有锚定（如www.xyz.com/page#weather）的URL，让它自动转到并扩展另一个li中的li。我曾尝试将#abc添加到a href=#abc，然后尝试使用与包含的URL类似的代码。我试着在我需要的li中添加id。下面的代码基于当前的活动结构。我不想在寻求帮助时把事情弄得一团糟，把自己和别人弄糊涂。我继承了这段代码，现在不可能对其进行彻底修改

我感谢你能提供的任何帮助

页面结构为：

<ul data-ui="accordian">
  <li data-ui="expandable">
    <a href="#" class="Toggle">Main accordion title here</a>
    <div class="content">
      <ul data-ui="accordian">

        <li data-ui="expandable">
          <a href="#" class="toggle">Inner accordion title to expand</a>
          <div class="content">
            <p>some text here</p>
          </div>
        </li>

        ...

        ...

      </ul>
    </div>
  </li>
</ul>

---

我最近遇到了这个问题。下面是我如何解决这个问题的：

这就是您需要的JavaScript片段：

var active = 1;
    var hash = document.location.hash;
    console.log(hash);

    if (hash.length > 0) {
        var section = $("#deep-link").children("li" + hash);
        var thisPanel = section.children(".responsive-accordion-panel");
        if (section.length) {
            active = section.index();
        }
        thisPanel.addClass('active').slideDown();
    }

---

只需将

id=deep link

添加到您的UL元素，然后使用您自己的结构替换

.responsive accordio panel

和

'active'

。

我最近遇到了这个问题。下面是我如何解决这个问题的：

这就是您需要的JavaScript片段：

var active = 1;
    var hash = document.location.hash;
    console.log(hash);

    if (hash.length > 0) {
        var section = $("#deep-link").children("li" + hash);
        var thisPanel = section.children(".responsive-accordion-panel");
        if (section.length) {
            active = section.index();
        }
        thisPanel.addClass('active').slideDown();
    }

---

只需将

id=deep link

添加到您的UL元素中，然后使用您自己的结构替换

.responsive accordio panel

和

'active'

。

这是我在测试了我遇到的不同情况后得出的结论。它允许我以以下形式输入URL，这将在父级accordion中展开特定的accordion:example.com/page#abc&def

我为每个父手风琴添加了一个元素id，然后为每个子手风琴添加了一个元素id。这允许我指定要展开的手风琴（父元素或子元素），然后滚动到父元素。这可能不是最漂亮的，但我正在努力学习。我为我的无知道歉

// get URL
var url = document.location.toString();

// check for char in URL
if ( url.match('#')) {
    if (url.match('&')) {
        var main=url.substring(url.lastIndexOf('#')+1,url.lastIndexOf('&'));
        var sub=url.substring(url.lastIndexOf('&')+1);
        $('#' + sub).addClass('open');
    } else {
        var main=url.substring(url.lastIndexOf('#')+1);
    }

    $('#' + main).addClass('open');

    // scroll to expanded main panel
    document.getElementById(main).scrollIntoView();
}

---

这是我在测试了我遇到的不同事物后得出的结论。它允许我以以下形式输入URL，这将在父级accordion中展开特定的accordion:example.com/page#abc&def

我为每个父手风琴添加了一个元素id，然后为每个子手风琴添加了一个元素id。这允许我指定要展开的手风琴（父元素或子元素），然后滚动到父元素。这可能不是最漂亮的，但我正在努力学习。我为我的无知道歉

// get URL
var url = document.location.toString();

// check for char in URL
if ( url.match('#')) {
    if (url.match('&')) {
        var main=url.substring(url.lastIndexOf('#')+1,url.lastIndexOf('&'));
        var sub=url.substring(url.lastIndexOf('&')+1);
        $('#' + sub).addClass('open');
    } else {
        var main=url.substring(url.lastIndexOf('#')+1);
    }

    $('#' + main).addClass('open');

    // scroll to expanded main panel
    document.getElementById(main).scrollIntoView();
}

---

手风琴究竟是如何扩展的，它不是完全由自身发生的，必须有代码才能真正创建手风琴？你读过另一个问题的公认答案了吗？它显示了要做什么，有一个手风琴的脚本，它工作得非常好。我会更新我的问题，包括脚本以及；然而，我无法让它工作。在该用户的示例中，他们正在扩展单个手风琴。我需要在手风琴中展开手风琴。我是否需要修改js来将open类添加到父accordion和子accordion中？或者，如果子手风琴展开，是否也会展开父手风琴？我问这个问题是因为我不确定，而且我还没有找到一个适合我的解决方案。佐尔赫谢谢你迄今为止的帮助。我做了一些实验，但参加了一些会议。是否将id=深度链接添加到外部ul或内部ul？此外，URL还需要打开内部li。手风琴是如何展开的，它不是完全由自身发生的，必须有代码才能真正创建手风琴？你读了其他问题的公认答案了吗？它显示了要做什么，有一个手风琴的脚本，它工作得非常好。我会更新我的问题，包括脚本以及；然而，我无法让它工作。在该用户的示例中，他们正在扩展单个手风琴。我需要在手风琴中展开手风琴。我是否需要修改js来将open类添加到父accordion和子accordion中？或者，如果子手风琴展开，是否也会展开父手风琴？我问这个问题是因为我不确定，而且我还没有找到一个适合我的解决方案。佐尔赫谢谢你迄今为止的帮助。我做了一些实验，但参加了一些会议。是否将id=深度链接添加到外部ul或内部ul？此外，URL还需要打开内部li。