javascript 如何从另一个可折叠项目 [js] 中的链接展开可折叠项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29226082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to expand a collapsible item from link within another collapsible item [js]?
提问by zelusp
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>
回答by skobaljic
I would just trigger click event on first .collapsible-headeritem, with slightly changed html code for the anchor:
我只会在第一.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>Same code is also on Fiddle.
同样的代码也在Fiddle 上。
If you wish to target n-th element, than you can use jQuery :eq() selector(zero based). For example, to target 3rd item you would use '.collapsible-header:eq(2)'selector.
如果您希望定位第 n 个元素，则可以使用jQuery :eq() 选择器（从零开始）。例如，要定位第三个项目，您将使用'.collapsible-header:eq(2)'选择器。
If you care about the SEO(and you should), than your links should have correct href. In this case add unique IDs to .collapsible_headerelements and use slightly different script to exploit it:
如果您关心 SEO（您应该这样做），那么您的链接应该具有正确的href. 在这种情况下，为.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)
你可以看到它在这个 Fiddle上工作。（最后一个锚点可能在同一页面的任何位置）
