jQuery Keydown Next, NextAll, Parent Issue

Question

和我的宿敌一起回来(jQuery/JS)

基本上我有一堆 div，在每个里面我都有一个隐藏的 div，点击时会切换。这很好用。

<div class="parent">
    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>
</div>

$(".parent").on("click",".article",function(){
    $(".hidden").hide("fast");
    $(this).next('.hidden').slideToggle("fast");
});

我现在决定让用户能够使用光标点击下一步：

$(document).keydown(function(e){
    switch (e.which){
    case 39:
    $(this).parent('.parent').closest('.article-holder').next('.hidden').slideToggle();
    break;
    }
});

这是我无法开始工作的部分。我尝试了多种想法，但我无法找到正确的光标来切换下一个隐藏 div.

Answer 1

要实现这一点，您需要对 .article-holder 元素使用 addClass()、removeClass()

• 使用.not($(this).next('.hidden'))避免在下一个.hidden

中切换

• 用$(".article-holder.opened")捕捉打开的文章..然后用.next(".article-holder").find(".article").trigger("click")触发click/toggle动作

在下一个代码中，我 add/removeClass 调用了 opened .. 按 < 或 >

$(".parent").on("click",".article",function(e){
    e.preventDefault();
    $(".article-holder").removeClass("opened");
    $(".hidden").not($(this).next('.hidden')).hide("fast");
    $(this).closest(".article-holder").addClass("opened")
    $(this).next('.hidden').slideToggle("fast");
});

//I've now decided I want to have the user able to use the cursor to hit next:

$(window).on( "keydown" ,function(e){
    e = e.which || e.keyCode;
    switch (e){
      case 37:
        if($(".article-holder.opened").length){
          if($(".article-holder.opened").index() !== ($(".article-holder").length)){
          $(".article-holder.opened").prev(".article-holder").find(".article").trigger("click");
          }
        }else{
          $(".article-holder:eq("+ ($(".article-holder").length - 1)+") > .article").trigger("click");
        }
        break;
      case 39:
        if($(".article-holder.opened").length){
          if($(".article-holder.opened").index() !== $(".article-holder").length -1){
          $(".article-holder.opened").next(".article-holder").find(".article").trigger("click");
          }
        }else{
          $(".article-holder:eq(0) > .article").trigger("click");
        }
      break;
    }
});

.hidden{
  display : none;
}
.article-holder.opened{
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>
</div>