单击手风琴中元素 id 的链接时打开 JQuery 手风琴

2024-03-07

这是我的问题http://jsfiddle.net/uJ3W5/12/ http://jsfiddle.net/uJ3W5/12/

正如您所看到的,顶部的 4 个按钮链接到手风琴第 1 部分中的元素。然而,当手风琴关闭时,这些链接不起作用。

我需要它,这样当您单击链接时,手风琴就会打开,页面会滚动到相关部分,我有点困惑。

非常感谢!

My HTML:

<head>
  <title>jQuery UI Accordion - No auto height</title>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

    <div class="buttons">
      <div><a href="#btn1" class="btn btn-primary btn-large">One</a></div>
      <div><a href="#btn2" class="btn btn-primary btn-large">Two</a></div>
      <div><a href="#btn3" class="btn btn-primary btn-large">Three</a></div>
      <div><a href="#btn4" class="btn btn-primary btn-large">Four</a></div>
    </div>


<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <h3 id="btn1">One</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    <h3 id="btn2">Two</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    <h3 id="btn3">Three</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    <h3 id="btn4">Four</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>


</body>
</html>

我的jquery:

  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content",
      active: false,
      collapsible: true 
    });
  });

实际上,为了让它完全按照您想要的方式工作,您必须使用回调函数,因此仅当手风琴打开完成时才调用 href。

var callback = function() {};  

$(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content",
      active: false,
      collapsible: true,
        activate: function() { callback(); }
    });
  });

    $(".buttons a").click(function(event) {
        var active = $("#accordion").accordion("option", "active")+"";
        if(active != "0") {
            event.preventDefault();
            var ahref = $(this).attr("href");
            callback = function() {
                location.href = ahref;
                callback = function() { };
            };
            $("#accordion").accordion("option", "active", 0);
        }
    });

干得好:http://jsfiddle.net/uJ3W5/28/ http://jsfiddle.net/uJ3W5/28/

选择的正确答案不会将屏幕带到您想要的位置。我的有一个。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击手风琴中元素 id 的链接时打开 JQuery 手风琴 的相关文章

随机推荐

  • 跨 AppDomains 和进程的 TransactionScope

    跨不同的AppDomains和进程使用System Transactions 主要是TransactionScope 是真的吗 相关交易 http msdn microsoft com en us library system transa
  • 如何在 VB.NET 中使用 BeginInvoke

    在 C 中你使用BeginInvoke像这样 obj BeginInvoke Action gt do something 我尝试将其转换为 VB NET 最后得到了这段代码 看起来可行 obj BeginInvoke Sub do som
  • ASP.NET MVC 快速教程 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Pygame:如何让我的图像下降?

    我试图让物体像在地球上一样下落 我已经让它们到了我想要的地方 但我似乎无法为它们设置动画 这就是我想要落下的物体 import pygame class circle def init self screen planet color 25
  • 在 android 5 上膨胀类 android.webkit.WebView 时出错

    我在 Android 5 0 API 21 上进行测试时出现以下错误 在其他操作系统版本上测试效果良好 java lang RuntimeException 无法启动活动 ComponentInfo ui activities naviga
  • 如何在 VSCode 中复制代码行的 URL?

    当我使用 VSCode 工作并且需要将代码行 URL 从存储库发送给同事时 这种情况经常发生 VSCode 对此没有本机支持 如果您使用 Bitbucket 则 Atlassian 插件会启用一项功能 然而 我一直在寻找更通用的选择 我使用
  • 菜单被裁剪

    我有一个MFC项目 它支持 40 多种语言 我的电脑上有两个显示器 它们都是不同尺寸的显示器和不同的分辨率 如果我将应用程序移至较小的显示器上 则不会显示完整的语言菜单 我知道它会显示滚动条 为什么不是呢 我的菜单是标准菜单 没有什么花哨
  • “java.lang.ClassFormatError: Invalid pc in LineNumberTable”的可能原因

    今天我开始编写一个使用 sqlite 的项目 当我尝试测试它时 我收到了java lang ClassFormatError LineNumberTable 中的 pc 无效 希望你能帮助我 因为我迷路了 我搜索了这个错误 并发现了一些针对
  • GWT 列表框多选

    我需要添加一个列表框 组合框 允许用户选择多个值 我知道 GWT API 中已经有一个可用的ListBox http google web toolkit googlecode com svn javadoc 1 5 com google
  • 使用 Doctrine 和 Symfony2 查询多对多关系

    我试图理解 Doctrine 和 Symfony2 中的多对多关系是如何运作的 我重新创建了官方文档 goo gl GYcVE0 中显示的示例 并且我有两个实体类 User and Group正如你在下面看到的
  • 错误 0x80005000 和 DirectoryServices

    我正在尝试使用 Net 中的目录服务运行简单的 LDAP 查询 DirectoryEntry directoryEntry new DirectoryEntry LDAP someserver contoso com DC contoso
  • 为什么 Xcode 7 显示 *.tbd 而不是 *.dylib?

    Xcode 7 在目标 gt 构建阶段 gt 链接二进制文件与库 gt 点击 按钮 选择要添加的框架时 您找不到 dylib 而是看到 tbd 这是什么原因呢 需要dylib的人 从这里开始post https stackoverflow
  • Python 将 3d 数组重塑为 2d

    我想将 numpy 数组重塑为所描绘的形状 从 3D 变为 2D 不幸的是 顺序不正确 假设有一个 numpy 数组 1024 64 100 并希望将其转换为 1024 100 64 有人知道如何维持秩序吗 我有一个样本数据 data 0
  • Maven - 对等点未经过身份验证

    几天前 我的专家停止工作了 更具体地说 它会停止下载依赖项 下面我记录了我为找到解决方案而执行的一系列信息和步骤 我仔细检查了 settings xml 这个文件也被我的同事使用 他们没有任何问题 我安装了 Maven 3 0 4 3 0
  • 存储批处理作业的密码

    我有一个小的java prog 它使用需要授权的网络服务 因此java prog 将使用Windows任务调度程序运行 需要有一个用户 密码参数 如何将它们存储在某个地方而不将它们作为纯文本放在文件中 到目前为止 我已经尝试使用runtim
  • 无法在将新附加的字符串列保存到 numpy 数组时执行 np.savetxt

    我有 numpy 数组mfcc具有 mfcc 值 且形状为 5911 20 我有一份清单a 其中有 5911 个标签 例如apple cow dog 我想将这些标签附加到mfccnumpy 数组 STEP1我将带有标签的列表转换为数组 at
  • 自定义 Django 字段来存储电子邮件地址列表

    我正在尝试向 Django 模型添加一个字段来表示电子邮件地址列表 我希望用户在管理中的表单中输入逗号分隔的地址列表 然后我的应用程序将解析该列表以发送一系列电子邮件 我当前的实现涵盖了基本思想 但有很大的局限性 在管理中 如果我输入类似的
  • 增加 JMeter 执行期间的线程数

    我有一个性能测试JMeter并想用它来测试最大系统性能 吞吐量 因此 当错误率低于 2 时 应增加活动线程数 我发现Constant Throughput Timer 把它放入Thread Group但它只会暂停或减慢线程 我尝试将其定义如
  • 从 Postman 向 Microsoft Bot 发送消息

    我正在尝试向我创建并发布到 azure 服务的机器人发送消息 以便该机器人可以开始向其某些用户发送消息 我尝试首先在 Postman 上发出请求 然后我可以为该交互构建一个控制器 我正在执行以下请求 POST https login mic
  • 单击手风琴中元素 id 的链接时打开 JQuery 手风琴

    这是我的问题http jsfiddle net uJ3W5 12 http jsfiddle net uJ3W5 12 正如您所看到的 顶部的 4 个按钮链接到手风琴第 1 部分中的元素 然而 当手风琴关闭时 这些链接不起作用 我需要它 这