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

Question

I'm making a list of collapsible items that can make calls to itself to scroll to and expand other items on the fly. 我正在制作一个可折叠项目列表，可以调用自己来滚动和动态扩展其他项目。 Shooting for this... 为此射击......

Before selecting the hyperlink. 在选择超链接之前。 在此输入图像描述

After selecting. 选择后。 在此输入图像描述

How can I get the First collapsed item to expand when the link to it in the Third item's paragraph is selected? 当选择第三个项目段落中的链接时，如何将第一个折叠项目展开？

What I got : If the example above had more collapsed items, then the code below would scroll the webpage to the desired collapsible item (half the solution). 我得到了 ：如果上面的示例有更多折叠项目，那么下面的代码会将网页滚动到所需的可折叠项目（解决方案的一半）。

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

I would just trigger click event on first .collapsible-header item, with slightly changed html code for the anchor: 我只会在第一个.collapsible-header项目上触发click事件，稍微更改了锚点的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>

Same code is also on Fiddle . 同样的代码也在小提琴上 。

If you wish to target n-th element, than you can use jQuery :eq() selector (zero based). 如果你希望定位第n个元素，那么你可以使用jQuery：eq（）选择器（基于零）。 For example, to target 3rd item you would use '.collapsible-header:eq(2)' selector. 例如，要定位第3项，您将使用'.collapsible-header:eq(2)'选择器。

If you care about the SEO (and you should), than your links should have correct href . 如果你关心SEO （你应该），你的链接应该有正确的href 。 In this case add unique IDs to .collapsible_header elements and use slightly different script to exploit it: 在这种情况下，为.collapsible_header元素添加唯一ID，并使用略有不同的脚本来利用它：

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

where the target item is: 目标项目在哪里：

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

and the valid local link is: 有效的本地链接是：

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

You can see it working on this Fiddle . 你可以看到它在这个小提琴上工作。 (The last anchor may be anywhere on the same page) （最后一个锚点可能位于同一页面的任何位置）

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

问题描述

1 个解决方案

解决方案1
10 已采纳 2015-03-25 01:37:33

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

问题描述

1 个解决方案

解决方案1 10 已采纳 2015-03-25 01:37:33

解决方案1
10 已采纳 2015-03-25 01:37:33