3

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

在选择超链接之前。 在此处输入图像描述

选择后。 在此处输入图像描述

选择第三项段落中的链接时，如何获得第一个折叠的项目进行扩展？

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

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

1 回答 1

11

我会在第一.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() 选择器（从零开始）。例如，要定位第三个项目，您将使用'.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>

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

于 2015-03-25T01:37:33.587 回答