jquery - 当我单击一个事件选项卡时，我希望所有选项卡都出现。之后，当我单击我想要的选项卡时，我希望所有其他选项卡消失

Question

当我单击一个事件选项卡时，我希望所有选项卡都出现。之后，当我单击所需的选项卡时，我希望所有其他选项卡都消失。

我已将我的 jfiddle 作为代码附上，试过无法弄明白。

请帮忙。

https://jsfiddle.net/alecruckus/aq9Laaew/283716/

<script type="text/javascript">
    $(document).ready(function(){
        $('.nav-link').hide();
        $('.nav-link.active').show();
        $('.nav-link.active').click(function(){
          $('.nav-link').addClass('opened');
          $('.nav-link').show();
        });
        $('.nav-link.opened').click(function(){
          $('.nav-link').removeClass('opened');
          $('.nav-link').hide();
          $('.nav-link.active').show();
        });

    });
    </script>

Answer 1

我认为问题在于您的第二个点击监听器未附加(因为那时没有包含 opened 类的元素)。您可以将点击监听器更改为以下内容:

$('.nav-link').click(function() {
    if ($(this).hasClass('active')) {
        $('.nav-link').show();
    } else {
        $('.nav-link').hide();
        $(this).show();
    }
});

演示:https://jsfiddle.net/p9v2mxLe/