Question

我制作了一个可折叠商品列表，可以调用自己来动态滚动和展开其他商品。为此拍摄......

在选择超链接之前。 enter image description here

选择后。 enter image description here

如果选择了第三个项目段落中链接的第一个折叠项目，我该怎样才能展开？

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

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

Answer 1

我只会在第一个.collapsible-header项上触发点击事件，并为锚点略微更改html代码：

＆＃13;

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

＆＃13;

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

＆＃13;

同样的代码也在 Fiddle 。

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

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

$('[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 。（最后一个锚点可能位于同一页面的任何位置）

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

1 个答案: