锚图标，带有隐藏 div，在悬停和单击时更改答案

【问题标题】：anchor icon, with hide div, change on hover and on click锚图标，带有隐藏 div，在悬停和单击时更改
【发布时间】：2014-03-24 17:38:56
【问题描述】：

我有一个可以切换隐藏 div 的锚点。当我将鼠标悬停在它上面时，我能够更改锚图标（我已经做了一个精灵），但我无法添加第二个 .click 事件，让我将锚更改为它的“btn_close”图标。
我希望代码执行以下操作：
悬停在“btn_open”上-----它变为“btn_open”：悬停
点击“btn_open”-----它变为“btn_close”并切换隐藏的 div
悬停在“btn_close”上-----它变为“btn_close”：悬停
点击“btn_close”-----它变为“btn_open”并切换隐藏的 div

我做了这个小提琴简化了我的问题（显示了我达到的点）。
http://jsfiddle.net/weberjavi/72xSL/

html:

<body>
<a href="#" class="btn_open">open</a>  
<div id="content"></div>
</body>

jquery:

$("#content").hide();
$(".btn_open").click(function () {
$("#content").toggle("slow");
return false;
});

谢谢大家。

【问题讨论】：

标签： jquery onclick hover toggle anchor

【解决方案1】：

试试这个，我不确定它是否是你想要做的

添加切换按钮将更改按钮的类，如果它已经在元素上，则删除它，如果没有，则添加它。

我将处理程序附加到他们的类以btn 开头的所有元素，这将使它与btn_close 和btn_open 一起工作

$("#content").hide();
$("[class^=btn]").click(function () {
    $(this).toggleClass("btn_open btn_close")
    if($(this).hasClass("btn_close")){
      $(this).text("close")
    }else{
      $(this).text("open")
    }
   $("#content").toggle("slow");
    return false;
});

Fiddle

【讨论】：

这正是我想要做的。
我只是删除了 if/else 语句中的“关闭”和“打开”文本，因为我想在两个图像之间切换（我从 css 中指出）。
Muchas gracias Eduardo。