jQuery Keydown Next、NextAll、父问题

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

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

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

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

在下一个代码中，我添加/删除名为 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>