如何关闭同级 LI 元素的 UL？
Posted
技术标签:
【中文标题】如何关闭同级 LI 元素的 UL？【英文标题】：How do I close the UL of sibling LI Elements? 【发布时间】：2020-04-20 17:47:53 【问题描述】：我正在尝试关闭同级 LI 元素的 UL 元素以避免同时打开两个元素。
html：
<li class="dropdown-submenu top-submenu">
<a tabindex="-1" class="setting" href="#">Settings <span class="caret"></span></a>
<ul class="dropdown-menu top-menu checkbox-menu">
<li class="dropdown-submenu top-submenu">
<a class="setting" href="#">Toolbars<span class="caret"></span></a>
<ul class="dropdown-menu top-menu">
<li data-toggle="tooltip" data-placement="bottom" title="Check make the RIGHT Toolbar double width - for wide screens!.">
<label class="pointer">
<input id="toolbarRightWide" type="checkbox">Double Wide</input>
</label>
</li>
<li class="divider"></li>
<li><a href="#">OFF</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Help text here.">ON: Right</a></li>
<!-- <li><a href="#">ON: Right (Wide)</a></li> -->
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Help text here.">ON: Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Help text here.">ON: Both</a></li>
</ul>
</li>
<li class="dropdown-submenu top-submenu" data-toggle="tooltip" data-placement="top" title="Create a history of feedback to each student (Canvas SpeedGrader only). This setting may be defined by your institution.">
<a class="setting" href="#">History <span class="caret"></span></a>
<ul class="dropdown-menu top-menu">
<li id="history_0" class="userPrefs"><a href="#" data-toggle="tooltip" data-placement="left" title="Help text here.">OFF</a></li>
<li id="history_2" class="userPrefs"><a href="#" data-toggle="tooltip" data-placement="left" title="Help text here.">ON: Anonymized</a></li>
<li id="history_1" class="userPrefs"><a href="#" data-toggle="tooltip" data-placement="left" title="Help text here.">ON: Student History</a></li>
</ul>
</li>
<li class="dropdown-submenu top-submenu">
<a class="setting" href="#">Search <span class="caret"></span></a>
<ul class="dropdown-menu top-menu">
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Help text here.">Labels & Full-Text</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Help text here.">Labels Only</a></li>
</ul>
</li>
<!-- <li><a tabindex="-1" href="#">Google Docs</a></li> -->
<li class="dropdown-submenu top-submenu">
<a class="setting" href="#">Google Docs <span class="caret"></span></a>
<ul class="dropdown-menu top-menu">
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Help text here.">One-click Commenting</a></li>
</ul>
</li>
</ul>
</li>
jQuery 监听点击“历史”（例如）然后“搜索”并自动关闭“历史”UL。
$('.top-submenu a.setting').on("click", function(e)
console.log('Clicking submenu item...', this);
$(this).next('ul').toggle();
console.log('Parent of clicked submenu item...', $(this).parent());
console.log('Siblings of Parent of clicked submenu item...', $(this).parent().siblings('li.top-submenu'));
var parentLI = $(this).parent().siblings('li.top-submenu');
console.log('Processing object: ', parentLI, typeof parentLI); // confirms object
$.each(parentLI, function (i, opt)
console.log('Processing each object: ', opt);
// console.log('UL of current: ', opt.closest( "ul"));
console.log('Processing child: ', opt.children());
// opt.closest('ul').addClass('hide');
// opt.child.next('ul').hide();
);
// $(this).parent().siblings('li.top-submenu').next('ul').toggle();
e.stopPropagation();
e.preventDefault();
);
我觉得我应该能够执行以下操作：
opt.children('ul').hide();
或类似的...
console.log 显示对象（'opt'）但抱怨“opt.children 不是函数”...
我错过了什么？感谢任何指导/示例 - 或更优雅地完成此任务的方法。
【问题讨论】：
【参考方案1】：好吧...对 jQuery 和 DOM 元素的根本误解。
您不能在原生 javascript DOM 对象上运行 jQuery。必须转换为 jQuery。
所以：
$(opt.children[1]).closest('ul').hide();
:)
【讨论】：
以上是关于如何关闭同级 LI 元素的 UL？的主要内容，如果未能解决你的问题，请参考以下文章