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

Posted 2023-02-22

【中文标题】在下拉菜单中响应地隐藏和显示子元素

【英文标题】：Responsively Hiding and Showing Child Elements In Dropdown Menu

【发布时间】：2018-01-17 19:55:41

【问题描述】：

我有一个下拉菜单，其中包含父类别，这些类别会在桌面上自动显示其子链接并在移动设备上隐藏它们，直到它们被点击。如果窗口大小重新调整，孩子们会再次显示。

这几乎可以工作，但是在调整窗口大小后，如果我单击桌面上的父类别，它将滑动切换子元素。它还会在调整大小后运行多个 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>

【参考方案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');
    
);