Question

我有这个功能，可以将navIsVisible类添加或删除到菜单项。它允许下拉列表出现。但是，当我添加其中两个菜单项并单击其中一个菜单项时，会显示两个菜单项的下拉列表。我知道这是因为这两个项共享相同的类并且是相同的，但是如何在不使用ID的情况下解决这个问题，因为我正在尝试使菜单生成数据驱动。或者我如何解决这个问题呢？如何才能使此功能仅影响我点击的触发器？

切换功能：

@JmsListener

正在添加的课程：

function toggleNav(){
        var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false;
        $('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible);
        $('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible);
        if( !navIsVisible ) {
            $('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('.has-children ul').addClass('is-hidden');
                $('.move-out').removeClass('move-out');
                $('.is-active').removeClass('is-active');
            }); 
        }
    }

我真的很感激任何帮助，谢谢你提前！

Answer 1

将点击目标作为参数传递给toggleNav函数并切换，而不是查找所有元素。

Answer 2

捕获点击后，将currentTarget传递给您的toggleNav函数并使用它来确定要定位的div：

$('.cd-dropdown-trigger').on('click', function(event){
    event.preventDefault();
    toggleNav(event.currentTarget);
});

Answer 3

将.first() jQuery过滤器添加到选择器。有关详情，请访问https://api.jquery.com/first/

$('.cd-dropdown').first().toggleClass('dropdown-is-active', navIsVisible);

仅将类添加到一个div

3 个答案: