如何在另一个可折叠项目 [js] 中展开 link 中的可折叠项目？

Question

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

在选择超级之前link。

选择后

如何在选中第三项段落中的 link 时展开第一个折叠项？

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

<!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 Whosebug! 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>

Answer 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 Whosebug! 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（您应该），那么您的 link 应该有正确的 href。在这种情况下，将唯一 ID 添加到 .collapsible_header 元素并使用稍微不同的脚本来利用它：

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

目标项目所在的位置：

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

有效的本地 link 是：

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

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

如何在另一个可折叠项目 [js] 中展开 link 中的可折叠项目？

How to expand a collapsible item from link within another collapsible item [js]?

html

javascript

css

jquery

materialize