Question

我有一个下拉菜单，其中包含父类别，可以在桌面上自动显示其子项链接，并在移动设备上隐藏它们，直到它们被点击为止。如果窗口的大小恢复，则孩子们再次显示。

这几乎可以工作但是在调整窗口大小后，如果我单击桌面上的父类别，它将滑动切换子元素。它还将在调整大小后运行多个slideToggle事件，而不仅仅是一个。

我知道这可能是由于有两个slideToggle（）实例，但我在删除一个或其他实例时遇到了问题。有时他们永远不会在手机上打开，所以我发现两个实例都解决了这个问题

我正在寻找一个不那么臃肿且功能齐全的解决方案。我感谢所有的帮助，我希望从答案中获得知识。

＆＃13;

div.profile {
    position: relative;
    .profile-dropdown {
        position: absolute;
        top: 0px;
        left: 15px;
        margin: auto;
        width: 200px;
        background-color: white;
        transform: translate(-50%, 60px);
        border: 1px solid rgb(220, 220, 220);
        z-index: 2;
        &::after {
            position: absolute;
            content: '';
            width: 10px;
            height: 10px;
            border: 1px solid rgb(220,220,220);
            z-index: 1; //z-index = -1 doesn't work either
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            transform: rotateZ(45deg) translate(-50%, -35%);
        }
    }
}

＆＃13;

//Start Ignore
$('li.dropdown a').on('click', function (event) {
	$(this).parent().toggleClass('open');
});

$('body').on('click', function (e) {
if (!$('li.dropdown').is(e.target) 
    && $('li.dropdown').has(e.target).length === 0 
    && $('.open').has(e.target).length === 0
) {
    $('li.dropdown').removeClass('open');
}
});
//End Ignore

/**** CODE I NEED HELP WITH BELOW ****/

$(window).resize(function(){
	if ($(window).width()<768){
	
		$('.top-nav-link').on('click', function(event){
			event.preventDefault();
			$(this).parent().parent().find('.dropdown-nested-links').slideToggle();
			console.log('I worked.');
		});
	
	}else{
		$('.dropdown-nested-links').css('display', 'inline-block');
		
	}
});

if ($(window).width()<768){
	$('.top-nav-link').on('click', function(event){
		event.preventDefault();
		$(this).parent().parent().find('.dropdown-nested-links').slideToggle();
	});

}else{
	$('.dropdown-nested-links').css('display', 'inline-block');
	
}

$(window).resize(function(){
	if ($(window).width()>768){
		//Expands the links when resized back to Desktop
		$('.dropdown-nested-links').css('display', 'inline-block');
	}else{
		//Hides the category dropdown when resized back down to mobile
		$('.dropdown-nested-links').css('display','none')
	}
});

＆＃13;

.dropdown-nested-links{
padding:0;
display:none;
}

@media only screen and (min-width:768px){
  .dropdown-nested-links{
  padding:0;
  display:inline-block;
  }
}

＆＃13;

Answer 1

您应该删除click事件或在click事件中创建条件：

INPOLICE

在下拉菜单中反应隐藏和显示子元素

1 个答案: