jquery - 按下回车键时如何显示 jQuery 文本折叠的内容？

Question

这是我的 jQuery 函数（有效），当我单击它时，会出现我的文本：

 $(function() {
    $(".slide_down01").click(function () {
      var $this = $(this),
          id = $this.attr("id"), 
          div = $("." + id);        

      if( div.is(':hidden') ) {
        $(this).find("span").html("▼");
      } else {
        $(this).find("span").html("►");
      }
      div.stop(true, true).slideToggle("fast");

      return false;       
    });
})

...这是我的 HTML：

<div id="cursor01"> 
    <span id="slide01" class="slide_down01"><span>&#9658;</span> Title01 </span>
</div> 
<div>
<a href="#slide01"></a>
<div id="cursor01"> 
    <span id="slide01" class="slide_down01">
 <span>&#9658;</span> Title01</span>
</div>
<div id="node1" class="slide01" style="display:none"> 
    Text01,Text01
</div>

我想要的是当我用我的选项卡选择它并按 Enter 时出现内容。

有什么线索吗？我会非常感激的！

Answer 1

将按键事件附加到您的 slide_down01 类。这是代码：

$(".slide_down01").keypress(function(e) {
    // 13 = enter, 9 = tab
    if ( (e.which == 13) || (e.which == 9) ) {        
       $(this).click();
    }
});

这是小提琴：http: //jsfiddle.net/acturbo/MwM3j/

我不得不稍微更新一下你的 html。

Answer 2

尝试这个：

标记（尝试清理一下）：

<div id="cursor01"> 
    <a href="#">
    <span id="slide01" class="slide_down01"><span>&#9658;</span> Title01 </span>
    </a>
</div>
<div id="node1" class="slide01" style="display:none"> Text01,Text01</div>

jQuery :

$(".slide_down01").click(function () {
      var $this = $(this),
          id = $this.attr("id"), 
          div = $("." + id);        

      if( div.is(':hidden') ) {
        $(this).find("span").html("▼");
      } else {
        $(this).find("span").html("►");
      }
      div.stop(true, true).slideToggle("fast");

      return false;

});

$("#cursor01").keyup(function(event){
    if(event.which==13)
        $(".slide_down01").trigger("click");
});

LIVE SAMPLE