如何从另一个可折叠项目 [js] 中的链接展开可折叠项目？答案

【问题标题】：How to expand a collapsible item from link within another collapsible item [js]?如何从另一个可折叠项目 [js] 中的链接展开可折叠项目？
【发布时间】：2015-03-24 06:11:12
【问题描述】：

我正在制作一个可折叠项目列表，这些项目可以调用自身以动态滚动和展开其他项目。为此拍摄...

在选择超链接之前。

选择后。

如何在选择第三项段落中的链接时获取第一个折叠的项目才能展开？

我得到了什么：如果上面的示例有更多折叠项，那么下面的代码会将网页滚动到所需的可折叠项（解决方案的一半）。

<!DOCTYPE html>
<html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    <div>
        <ul class="collapsible" data-collapsible="accordion">
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><a name="987"/>First</a></div>
              <div class="collapsible-body"><p>Hello StackOverflow! SO's da' bomb diggidy!</p></div>
            </li>
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
              <div class="collapsible-body"><p>Why is the person who invests your money called a broker?</p></div>
            </li>
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
              <div class="collapsible-body"><p>I'd like to <a href="#987">open the First collapsible element</a> in this list.</p></div>
            </li>
        </ul>
    </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

【问题讨论】：

标签： javascript jquery html css materialize

【解决方案1】：

我会在第一个 .collapsible-header 项目上触发点击事件，稍微更改锚的 html 代码：

$('[data-click]').on('click', function (e) {
    $( $(this).data('click') ).trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>

<div>
    <ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>First</div>
            <div class="collapsible-body">
                <p>Hello StackOverflow! SO's da' bomb diggidy!</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
            <div class="collapsible-body">
                <p>Why is the person who invests your money called a broker?</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
            <div class="collapsible-body">
                <p>I'd like to <a href="#" data-click=".collapsible .collapsible-header:first">open the First collapsible element</a> in this list.</p>
            </div>
        </li>
    </ul>
</div>

Fiddle 上也有相同的代码。

如果您希望定位第 n 个元素，则可以使用 jQuery :eq() selector（从零开始）。例如，要定位第 3 个项目，您可以使用 '.collapsible-header:eq(2)' 选择器。

如果您关心 SEO（并且您应该），那么您的链接应该有正确的 href。在这种情况下，将唯一 ID 添加到 .collapsible_header 元素并使用稍微不同的脚本来利用它：

$('[data-click]').on('click', function (e) {
    $( $(this).attr('href') ).trigger('click');
});

目标项目在哪里：

<div id="about_stackoverflow" class="collapsible-header">

有效的本地链接是：

<a href="#about_stackoverflow" title="Click to open first item" data-click="true">open the First collapsible element</a>

您可以在 this Fiddle 上看到它。（最后一个锚点可能在同一页面的任何位置）

【讨论】：

像魅力一样工作。说真的，@skobaljic - 你太棒了。谢谢！
除了能够使用限定符 last 动态打开最后一个音符外，我无法根据您的锚实现 <a href="#" data-click=".collapsible .collapsible-header:first"> 修改要打开的音符。 如何使用此锚点打开任何折叠的项目，而不仅仅是第一个或最后一个？
您可以将 ID 添加到您的 .collapsible-headers，然后使用 '#your_id' 作为选择器。如果您希望定位第 n 个元素，则可以使用 jQuery :eq() selector（从零开始）。例如，要定位第 3 个项目，您可以使用 .collapsible-header:eq(2)。