个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在制作一个可折叠元素的列表，这些元素可以调用自身来动态滚动和展开其他元素。为此拍摄...
在选择超链接之前。 
选择后。 
选择第三项段落中的链接时，如何获得第一个折叠的元素？
我得到了什么:如果上面的示例有更多折叠元素，那么下面的代码会将网页滚动到所需的可折叠元素(解决方案的一半)。
<!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>
最佳答案
我会先触发点击事件 .collapsible-header元素， anchor 的 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() selector (零基础)。例如，要定位第 3 个元素，您可以使用 '.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>
你可以看到它在 this Fiddle 上工作 。 (最后一个 anchor 可能在同一页面的任何地方)
关于javascript - 如何从另一个可折叠元素 [js] 中的链接展开可折叠元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29226082/
25
4
0
我正在尝试创建一个无序列表，其中每个 包含另一个无序列表。我想要触发子菜单向下滑动的列表项有类 mobile-collapse子菜单有类 mobile-drop-menu 。这是我的 jquery 代
我使用 PMD检查我的代码。在大多数情况下，它给了我非常有用的提示，但我无法弄清楚在以下情况下可以改进什么。 原始代码如下所示: if ((getSomething() != null && getS
需要一些 jquery/js/jsp 功能的帮助.. 我有一个可折叠的表格脚本: (function($){ $.fn.extend({ setupCollapstable: funct
我使用 CSS 和 Javascript 创建了一个 Accordion ，但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可
我使用 CSS 和 JS 编写了一个可折叠按钮，我想将一个按钮嵌套在另一个按钮中。 是否可以动态调整第一个/外部按钮的高度，以便在打开第二个/内部按钮时，第一个按钮的高度增加第二个按钮的高度？ 这是我
我正在使用 jQuery 创建一个导航系统。我想要实现的是在页面加载时显示父元素并隐藏子元素。我做得非常简单。 然而，当我在其他父元素之间切换时，我希望能够隐藏之前的子元素，以便我只能打开一个 一次。
我正在尝试匹配这个设计 点击卡片应该展开 我不能用卡片包裹扩展 block ，因为扩展 block 基本上只有一行，我试着按照这个例子 flutter_catalog 我在谷歌上搜索了很多，但找不到我
我正在尝试切换 div 以使其可见/隐藏。我正在制作一个排行榜，我想打开它，但只能在单击时打开。 test fu
我正在使用 Materialize CSS 并使用可折叠的 Accordion 式元素 ( http://materializecss.com/collapsible.html )。 出于某种原因，当
我有一个递归 TreeView ，它从数据库中提取所有信息，并且想了解如何使其可折叠。我尝试使用 Jquery 和 Javascript，但都没有任何效果。不确定是我的错误还是其他原因。 这是我的基本
我收到异常“可折叠 if 语句”。 通过以下代码中的 Sonar 。 if(getSomething().equals(getSomething()){ if(getsomehing.contai
我正在制作 Accordion 以在 Angular 应用程序中使用 javascript 制作可折叠的 div.. 为此，如果单击Parent One 或任何其他父名称上的按钮未打开它.. HTML
我正在将 Ant Design 与 React 一起使用。 Ant Design 有一个菜单组件:https://ant.design/components/menu/ 是否可以使菜单不可折叠/展开？
我想展示这个可折叠 Accordion 的第一个元素。我在互联网上做了一些研究，但徒劳无功 Aller au dossier personnel
考虑以下 foldMap 的签名 foldMap :: (Foldable t, Monoid m) => (a -> m) -> t a -> m 这与“绑定(bind)”非常相似，只是交换了参数:
使用“fieldsets”，您可以通过指定 CSS 类“collapse”使其可折叠。如何对“内联”做同样的事情？谢谢! 最佳答案 在 Django 1.10+ 中: class MyModelInl
有人已经用 YUI dataTable 制作了如下示例的脚本吗？ 示例: http://extjs.com/deploy/dev/examples/tree/column-tree.html http
好吧，有些事情很奇怪，我无法弄清楚。假设我有一些类别，每个类别都有一些项目，全部放入字典中。 import wx nyoom = {} nyoom['spiders'] = ['Yellow Sac'
我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时，它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。 我能够通过下面的代码实现更多/更少的效果，但它看起来不对而且效果也不是很好，
我的布局包含顶部的水平 recyclerView 和 viewPager。 ViewPager 在其每个选项卡中都有一个 recyclerView。 我想在用户滚动布局时折叠顶部水平回收器 View
我是一名优秀的程序员,十分优秀！