0

これは私の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キーを押すと、コンテンツが表示されることです。

手がかりはありますか？とても感謝しています！

4

2 に答える 2

2

keypress イベントを 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 を少し更新する必要がありました。

于 2013-04-26T20:32:02.067 に答える
0

これを試して：

マークアップ(少しきれいにしてみました):

<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("&#9660;");
      } else {
        $(this).find("span").html("&#9658;");
      }
      div.stop(true, true).slideToggle("fast");

      return false;

});

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

LIVE SAMPLE

于 2013-04-26T20:32:34.003 に答える