Jquery 如何制作下拉列表并推送下面的内容？

我被困在一个地方。。。我得到了这个密码：

侧导航栏的动画工作原理与我所希望的几乎相同，但当我单击一个选项时，它会打开所有选项。我想在下一页得到类似的效果：

$（文档）.ready（函数（）{
$（'.interfejs、.procesor、.dane、.grafika、.linux、.sieci'）。单击（函数（）{
$（'.dropdown content'）.toggleClass（'visible-dropdown'）；
})
})

/*==站点导航内容===*/
.导航头{
宽度：100%；
高度：65px；
位置：相对位置；
文本对齐：居中；
}
.导航标头h2{
颜色：#fcfc；
字体大小：33px；
字号：800；
字母间距：1px；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
填充：0 13px；
背景色：#011018；
z指数：1；
宽度：自动；
显示：内联块；
文本阴影：0px 0px 4px黑色；
}
.导航标头：在{
内容：''；
背景色：#F5；
高度：1px；
宽度：100%；
位置：绝对位置；
最高：50%；
左：0；
利润上限：-0.5px；
}
.导航菜单{
位置：相对位置；
}
.导航菜单a{
填充：15px 8px 15px 32px；
左边距：20px；
文字装饰：无；
字体大小：20px；
字号：200；
字母间距：1px；
颜色：#818181；
背景色：#011018；
显示：块；
过渡：0.3s；
位置：相对位置；
}
.nav菜单a：悬停{
背景色：#212E35；
颜色：#F5；
字母间距：2px；
字号：500；
}
.fa角双下{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
左：5px；
}
/*==下拉内容===*/
.下拉内容{
文字装饰：无；
颜色：#fff；
身高：0；
过渡高度：0.3s；
背景色：#081d2a；
盒影：插入4px40x10px#05141D；
左边距：20px；
}
.可见下拉列表{
高度：100px；
}
.下拉列表内容li{
填充：2px0；
}

Spis treści

杰登
dwa
杰登
dwa



杰登
dwa
杰登
dwa



杰登
dwa
杰登
dwa



杰登
dwa
杰登
dwa



杰登
dwa
杰登
dwa



杰登
dwa
杰登
dwa

您只需打开单击的一个，然后关闭任何打开的。以下步骤可以做到这一点：

    <script>
        $(document).ready(function(){
          $('.interfejs, .procesor, .dane, .grafika, .linux, .sieci').click(function(){
            // First close the one that's open
            $('.dropdown-content').removeClass('visible-dropdown');
            // Then open the one that's clicked on
            $(this).next('.dropdown-content').addClass('visible-dropdown');
          })
        })
    </script>

$（文档）.ready（函数（）{
$（'.interfejs、.procesor、.dane、.grafika、.linux、.sieci'）。单击（函数（）{
//先把打开的关上
$（'.dropdown content'）.removeClass（'visible-dropdown'）；
//然后打开点击的那个
$（this）.next（'.dropdown content'）.addClass（'visible-dropdown'）；
})
})

您只需打开单击的一个，然后关闭任何打开的。以下步骤可以做到这一点：

    <script>
        $(document).ready(function(){
          $('.interfejs, .procesor, .dane, .grafika, .linux, .sieci').click(function(){
            // First close the one that's open
            $('.dropdown-content').removeClass('visible-dropdown');
            // Then open the one that's clicked on
            $(this).next('.dropdown-content').addClass('visible-dropdown');
          })
        })
    </script>

$（文档）.ready（函数（）{
$（'.interfejs、.procesor、.dane、.grafika、.linux、.sieci'）。单击（函数（）{
//先把打开的关上
$（'.dropdown content'）.removeClass（'visible-dropdown'）；
//然后打开点击的那个
$（this）.next（'.dropdown content'）.addClass（'visible-dropdown'）；
})
})

杰拉德的答案是正确的，但如果只针对一个类，则会更简洁、更具可扩展性。。。不是每个菜单类

$('.js-dropdown-toggle').on('click', function(e) {
  e.preventDefault();

  var $dropdownContent = $('.dropdown-content');
  $dropdownContent.removeClass('visible-dropdown');
  $(this).next('.dropdown-content').toggleClass('visible-dropdown');
});

---

杰拉德的答案是正确的，尽管只针对一个类会更干净、更具可扩展性。。。不是每个菜单类

$('.js-dropdown-toggle').on('click', function(e) {
  e.preventDefault();

  var $dropdownContent = $('.dropdown-content');
  $dropdownContent.removeClass('visible-dropdown');
  $(this).next('.dropdown-content').toggleClass('visible-dropdown');
});