如何关闭同级 LI 元素的 UL？

Question

我正在尝试关闭同级 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 不是函数”...

我错过了什么？感谢任何指导/示例 - 或更优雅地完成此任务的方法。

Answer 1

好吧...对 jQuery 和 DOM 元素的根本误解。

您不能在原生 Javascript DOM 对象上运行 jQuery。必须转换为 jQuery。

所以： $(opt.children[1]).closest('ul').hide();

:)