jQuery Keydown Next、NextAll、父问题

Posted 2023-02-25

【中文标题】jQuery Keydown Next、NextAll、父问题

【英文标题】：jQuery Keydown Next, NextAll, Parent Issue

【发布时间】：2020-05-14 19:44:12

【问题描述】：

再次回到我的克星（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。

【参考方案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>

【讨论】：

感谢您的回复。按键是不起作用的部分。在您的 sn-p 中不起作用？

对不起@Paul 我误解了这个问题，但现在更新了答案

@Paul 我的互联网连接确实很糟糕，这就是为什么我需要很长时间来更新答案.. 现在检查答案

太棒了，你成功了。非常感谢您的帮助：D

不客气@Paul ..祝你有美好的一天:-)