我试图关闭兄弟 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 不是函数”...
我错过了什么？感谢任何指导/示例 - 或更优雅地完成此操作的方法。
最佳答案
好吧...对 jQuery 和 DOM 元素的基本误解。
您不能在原生 Javascript DOM 对象上运行 jQuery。必须转换为 jQuery。
所以:
$(opt.children[1]).closest('ul').hide();
:)
关于javascript - 如何关闭兄弟 LI Elements 的 UL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59556954/