Javascript 滑动开关赢得'；不要在课堂上活动

我查阅了很多关于这个主题的问题，有一些类似的答案应该是可行的，但对我来说不起作用。我承认DOM遍历不是我的强项，所以如果您有一个解决方案，并且可以提供一些上下文，它将真正帮助我理解为什么其他解决方案不起作用

我有一个带按钮的div，点击按钮（这个按钮只出现在手机上），它应该只向下滑动当前的div内容。我可以让它工作，但问题是它会打开所有的divs内容。然而，即使使用诸如$（this），$（next），$（prev）或$（find）之类的解决方案，我也无法让它只打开特定的卡

我在下面发布的代码根本没有打开它，我使用的是这个版本的代码，因为它与堆栈溢出的答案最为相似

$（文档）.ready（函数（）{
$（'.mobile icon'）。在（'单击'，函数（）上）{
event.preventDefault（）；
$（this）.next（）.find（'.card bottom'）.slideToggle（）；
console.log（'hi there'）；//这会打印
});
});

大字标题
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛

要切换的内容

大字标题
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛

要切换的内容

主要问题是如何使用jQuery的
.next（）
和
.find（）
。由于
$（this）
是选择下一个兄弟的
，因此是
标记
。然后调用
标记
将检查它的所有子体，其中没有子体

因此，在使用.find（）向下遍历之前，您需要选择“card top”和“card bottom”div的父项

例如：

$(document).ready(function(){
  $('.mobile-icon').on('click', function(event){
      event.preventDefault();
      $(this).parent().parent().find('.card-bottom').slideToggle();
  });
});

对.parent（）的第一个调用将是

缺少
class=“card>

将
事件
添加到
函数（）
中，使其成为
函数（事件）

如果您不需要在任何地方链接，请使用
div
而不是
a
标记，并且不需要
preventDefault


$（'.mobile icon'）。在（'click'，函数（事件）{
event.preventDefault（）；
$（this）.closest（'.card'）.find（'.card bottom'）.slideToggle（）；
//.closest查找最近的.card祖先（向上）
//.find然后在最近的.card中查找.card底部
});
.mobile图标{
背景色：黑色；
宽度：100px；高度：40px；
颜色：白色；
}

大字标题
点击我
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛

要切换的内容

大字标题
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛

要切换的内容

您需要将
事件
传递到函数中才能使用preventDefault（）。您是否收到任何控制台错误？这是一个代表我的错误，因为我在复制代码，我正在撤消一些更改，以提取我想在本文中使用的代码。在那个阶段，我忘了包括这件事。事实上，我最初把“event”作为“e”来传递，我把它作为一个错误漏掉了。我将把它留给可能犯同样错误的其他人。我没有收到任何错误，“你好”就可以了。非常感谢。这是一个很好的解释。我真的很感激你的回答，我不确定我是否回答了。parent（）。parent（）它会返回两次。作为一名设计师，这对我来说很有意义，因为这就像我回到了两层。我选择你的答案是因为你解释得很好，没有太多技术性。谢谢。我的荣幸：）。这是一个很好的解决方案，效果非常好。类卡中的“缺失”是一个愚蠢的错误，因为我正在从实际使用的代码中删除不必要的类。我已经编辑了我的原始帖子以包含它。非常感谢你的回答。我选择了另一个，因为它解释了如何以我能理解的方式遍历DOM。感谢你的帮助！