在 Accordion menu.js 文件中放置图标而不是“+”或“-”

2024-03-27

我正在制作手风琴菜单。
我刚刚找到这个链接http://jsfiddle.net/zM5Vj/ http://jsfiddle.net/zM5Vj/,和我做的手风琴菜单几乎相似。
代码中,有

if($(this).text() == "-")  
{
  $(this).text("+");
  }
  else {
  $('#accordion .opener').text("+");
  $(this).text("-");
   }
 });

如果插入“+”和“-”,我想放置图标“~/Image/icon plus.gif”和“~/Image/icon minus.gif”。我该怎么做?
我努力了

<img src="..."/>

但仍然没有什么用。
请问有人可以帮忙吗?
提前致谢。


$(this).text()允许您为元素指定纯文本内容。要附加图像,请使用$(this).append($(<img src='plus.gif')).

另外,不要使用$(this).text() == '-'要查看菜单是否已展开,请将一个类附加到<a>元素。

例如,我们可以使用.addClass('expand')表示菜单已展开,然后.hasClass('expand')检查菜单是否已展开,最后'.removeClass('expand')表示菜单不再展开)。

这是一个示例,使用虚拟图像来说明:

JSFiddle http://jsfiddle.net/SiCurious/zM5Vj/24/

$(function(){

    //starter plus image
    var startPlus = $('<img>').attr('src','http://findicons.com/files/icons/1688/web_blog/48/add.png')
                              .css({'height': '20px', 'width': '20px'});

    $('#accordion .fullChild>a.opener').addClass('box')
                                       .append(startPlus);

    $('#accordion .opener').click(function() {

        //images for click event handler
        var plusImg = $('<img>').attr('src','http://findicons.com/files/icons/1688/web_blog/48/add.png')
                                .css({'height': '20px', 'width': '20px'});
        var minusImg = $('<img>').attr('src','http://findicons.com/files/icons/2083/go_green_web/64/subtract.png')
                                .css({'height': '10px', 'width': '10px'});

        if($(this).hasClass('expand')) {
            $(this).empty()
                   .append(plusImg)
                   .removeClass('expand');
        } else {
            $(this).empty()
                   .append(minusImg)
                   .addClass('expand');
        }
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Accordion menu.js 文件中放置图标而不是“+”或“-” 的相关文章

随机推荐

  • Spark fat jar 在 YARN 上运行多个版本

    我有一个旧版本的 Spark 设置和 YARN 我不想删除它 但仍然想使用较新的版本 我找到了一个couple https community cloudera com t5 Advanced Analytics Apache Spark
  • 窗口对象中奇怪的 self 对象

    我不明白为什么window在下面self and self在下面window目的 如果你去开发工具或 Firebug 并写window你得到了DOM window反对self位于该对象下 奇怪的部分是window在下面self again
  • 在Vue js中显示错误消息

    我有一个以下组件 其中有一个更新员工的方法 我想在 ajax 调用的 错误 回调中分配 更改 erroMessage 变量后立即在视图中显示错误消息 var EmployeeEdit Vue extend template employee
  • 如何在android中创建选项菜单?

    我想使用 c 和 Xamarin Studio 在 Android 应用程序中创建一个简单的选项菜单 我该怎么做 我还没有找到任何这方面的 C 示例 有人可以简单解释一下如何创建选项菜单吗 定义菜单 创建菜单的一种方法是使用放置在 Xama
  • Maven编译器使用的JDK版本在哪里指定?

    当我没有在我的 pom xml 文件中定义如下内容时 在我的系统上的哪个位置为 Maven 定义了编译时使用哪个版本的 Java JDK 我的系统上安装了多个版本 JAVA HOME指向其中之一
  • 使用 SQL Server 2012 恢复多个数据库的最佳脚本?

    我必须恢复大约 60 个不同大小的 SQL 数据库 我在谷歌上搜索找到一个脚本来依次恢复所有数据库 只需从我的文件夹中一一挑选它 我没有那么成功 可能是因为我对 SQL 等还很陌生 它可以在 powershell 或 sql 命令行中完成
  • 无法使用处理程序解决 CalledFromWrongThreadException

    我会尽量保持简单 在我的主要活动中 我创建了一个处理程序 public class ARViewer extends ARDisplayActivity public final MHandler mHandler new MHandler
  • Linux 发行版二进制兼容性

    有没有办法在 Linux 发行版中制作二进制文件并在具有相同架构的另一个发行版上运行它 或者我应该在不同的发行版上编译和构建它 基于 Redhat Debian 的二进制文件发行版之间是否存在兼容性 我想在 fedora 上使用我的 Ubu
  • 尝试打开工作簿时的 VBA 错误处理

    我试图循环浏览文件夹中的所有文件 打开它们并删除文档信息 我在处理无法打开的文件或打开时出现有关禁用宏的弹出消息时遇到问题 我尝试使用错误恢复下一步和错误转到 0 来解决此问题 但随后我遇到运行时失败 因为当我尝试关闭已打开的文件时 我的工
  • 管理多个 AWS 账户凭证的推荐方法?

    通过以下方式管理多个 Amazon Web Services AWS 账户的最佳方式是什么boto 我熟悉博托配置 http docs pythonboto org en latest boto config tut html文件 我正在使
  • Eclipse 使用 jboss 进行远程调试

    如何在 JBOSS 服务器 4 x 版本的 Eclipse 中配置远程调试 So far Step1 我修改了run config文件 通过取消注释以下行 用于远程套接字调试的示例 JPDA 设置 JAVA OPTS JAVA OPTS X
  • 系统更新IMG的src。内存泄漏

    系统更新IMG的src 内存泄漏 我目前每 x 秒更新一张图像 我想到的几种方法如下 拿一个 var url ImageID attr src url 现在这个作品完美地改变了形象but导致内存泄漏 取二 所以它正在创建 DOM 元素 所以
  • 相当于 JMockIt 中的 times() 吗?

    我不认为 minInspiration 或 maxInspiration 等同于 Mockito 中的 times 有没有 请看这个问题 Mockito 和 JMockIt 之间的主要区别 https stackoverflow com q
  • 如何在 Artifactory 中触发 Jenkins 在新工件上构建?

    Artifactory 可以用作 Jenkins 中的 SCM 或源来触发特定工件部署上的构建吗 在 Artifactory Jenkins 插件中没有看到 或错过 任何类似的内容描述 https www jfrog com conflue
  • 选择 count(*) 并“连接”3 个表

    我正在寻找 3 个表的联接内的计数查询 它可以让我对其中一个表的不同值进行计数 我有 3 个表 需要连接它们才能获取预期数据 Workflow Message and Message Workflow Relation 我想获取按状态 已连
  • 为什么使用 Gradle 而不是 Ant 或 Maven? [关闭]

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

    我的 Javascript 函数导致我的控制台返回我 类型错误 样式为空 这里是片段 let style one 1 two 2 three 3 function styling style style ruleSetStock retur
  • C# 中的OptionalField 已经过时了吗?

    看来可选字段属性 http msdn microsoft com en us library system runtime serialization optionalfieldattribute aspx不再需要 如果有的话 使用 Bin
  • MongoRepository @Query 无法将字符串解析为日期

    首先 我的问题是通过 Spring MongoDb 的 MongoRepository 在 MongoDB 中搜索集合 我的对象 id ObjectId 5c78e1f447f39c2eacb229d7 lab xxx type Holid
  • 在 Accordion menu.js 文件中放置图标而不是“+”或“-”

    我正在制作手风琴菜单 我刚刚找到这个链接http jsfiddle net zM5Vj http jsfiddle net zM5Vj 和我做的手风琴菜单几乎相似 代码中 有 if this text this text else acco