当前位置: 首页 > 知识库问答 >
问题:

jQuery手风琴防止手风琴更改

桑成荫
2023-03-14

我正在使用jQuery手风琴来隐藏一些数据。

accordion标题是一个带有一些标题的表格。有一个标题,我不希望你点击它,因为手风琴事件会触发。

所以

<div id="accordion">
    <div id="table">
    <table>
        <tr>
        <th>Test</th>
        <th></th>
        <th></th>
        <th class="nofunction">Test2</th>
        </tr>
    </table>
    </div>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
</div>

手风琴是可折叠的,如果您单击Test2(类nofunction),手风琴事件不应触发。但是如果您单击Test或其他表头,手风琴应该会触发事件。

我可以添加这个功能吗?

更新测试http://jsfiddle.net/e3Q8d/,包括jQuery用户界面

共有1个答案

鲜于光辉
2023-03-14

只需将此添加到JS:

$(".nofunction").on("click", function(e){
    e.stopPropagation();
});

小提琴

 类似资料:
  • 手风琴效果其实就是通过JS改变元素的height,然后加上transition来让css动起来。 准备HTML结构 这里我们使用 dl , 因为 dt 刚好可以模拟标题, dd 模拟内容。 <div class="panel"> <dl> <dt>One Item</dt> <dd>One Item Content .</dd>

  • jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者,它被分成几个部分,可能看起来像标签。 jQueryUI提供了accordion()方法来实现这一点。 语法 (Syntax) accordion()方法可以使用两种形式 - $(selector,context).accordion(options)方法 $(selector, context).

  • 描述 (Description) 手风琴是一个图形控制元素,显示为堆叠的项目列表。 每个手风琴都可以expanded或stretched以显示与手风琴相关的内容。 可折叠布局 当您使用单个单独的可折叠元素时,您需要省略accordion-list包装元素。 以下是可折叠布局的结构 - <!-- Single collapsible element ------> <div class = "acc

  • 本文向大家介绍jquery手风琴特效插件,包括了jquery手风琴特效插件的使用技巧和注意事项,需要的朋友参考一下 手风琴效果是项目中使用频率较高的一种效果,原来项目一直都在用easyui的,临近年末,试着自己写了一个 css样式 自定义js html调用方式 显示效果 以上就是本文的全部内容了,希望大家能够喜欢

  • 在垂直导航中,如果存在多个分级,常常使用手风琴导航,它会以手风琴方式展开和折叠,来节约空间。 简单的说,手风琴导航就是垂直导航的层层嵌套,需要多少级,就嵌套多少层。这里就以两级导航为例,来介绍手风琴导航的基本制作方法。 为了方便控制手风琴导航的样式和行为,外层导航使用定义列表 dl、而内层使用无序列表 ul 来包裹导航中的链接元素: <dl class="accordion">     <dt>

  • 本文向大家介绍简单实现jQuery手风琴效果,包括了简单实现jQuery手风琴效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下 js代码: css代码: html代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。