javascript - 在下拉菜单中响应地隐藏和显示子元素

Question

我有一个下拉菜单，其中包含父类别，这些类别会自动在桌面上显示其子链接，并在点击它们之前在移动设备上隐藏它们。如果窗口大小备份，子项将再次显示。

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

我知道这可能是因为有两个 slideToggle() 实例，但我在删除一个或另一个实例时遇到了问题。有时他们永远不会在移动设备上打开，所以我发现把这两个实例都解决了这个问题。

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

CodePen

//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')
	}
});

.dropdown-nested-links{
padding:0;
display:none;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse">

<ul class="nav navbar-nav learn-nav">
  <li class="dropdown"><a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Click Me <span class="glyphicon glyphicon-menu-down"></span></a>
    <ul class="dropdown-menu">
      <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6 dropdown-section">
          <li><a href="#" class="top-nav-link">Parent 1</a></li>
          <ul class="dropdown-nested-links">
            <li><a href="#" class="nested-nav-link"><span></span>Child</a></li>

            <li><a href="#" class="nested-nav-link"><span></span>Child</a></li>

            <li><a href="#" class="nested-nav-link"><span></span>Child</a></li>
          </ul>

        </div>
        <div class="col-sm-6 dropdown-section inverse-section">
          <li><a class="top-nav-link" href="#">Parent 2</a></li>
          <ul class="dropdown-nested-links">
            <li><a href="#" class="nested-nav-link"><span></span>Child</a></li>

            <li><a href="#" class="nested-nav-link"><span></span>Child</a></li>
        </ul>
  </div>
    </ul>
  </li>
</ul>
  </nav>

Answer 1

您应该删除点击事件或在点击事件中设置条件:

$('.top-nav-link').on('click', function(event){
    if ($(window).width()<768){
        event.preventDefault();
        $(this).parent().parent().find('.dropdown-nested-links').slideToggle();
            console.log('I worked.');
    }
});

$(window).resize(function(){
    if ($(window).width()>=768){
        $('.dropdown-nested-links').css('display', 'inline-block');
    }
});