Question

我对.js很新，并且一直在制作下拉导航菜单。我已经完成了大部分工作，但我被要求为菜单激活包含一个特定的片段。

我想知道如何在打开其他子窗口时隐藏或向上滚动其他子项目。

我在这里做错了什么？

<div id="nav_mob">
  <div id="nav-toggle"><span></span></div>
  <div class="dropdown_mob">
    <ul>
      <a class="dropdown_btn">
        <li>Overview</li>
      </a>
      <div class="subnav_mob">
        <ul>
          <a href="#"><li>Introduction</li></a>
          <a href="#"><li>Research</li></a>
          <a href="#"><li class="padded">Planning &amp; Preparation</li></a>
          <a href="#"><li>International</li></a>
        </ul>
      </div>
      <a class="dropdown_btn"><li>Profile</li></a>
        <div class="subnav_mob">
          <ul>
            <a href="#"><li>My Account</li></a>
            <a href="#"><li>My Cart</li></a>
            <a href="#"><li>Check Out</li></a>
            <a href="#"><li>Log Out</li></a>
          </ul>
        </div>
      <a class="dropdown_btn"><li>Search</li></a>
        <div class="subnav_mob">
          <ul>
            <li><div id="smallsearch"><input type="text"></div></li>
          </ul>
        </div>
      </div>
    </ul>
  </div>
</div>

我给出的片段：

var dropdown = document.getElementsByClassName('dropdown_btn');
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener('click', function() {
    this.classList.toggle('active');
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display == 'block') {
      dropdownContent.style.display = 'none';
    } else {
      dropdownContent.style.display = 'block';
    }
  });
}

我试图实现的修复：

$(document).ready(function() {
  $('.dropdown_btn').on('click', function() {
    var state = $('.dropdown_btn').is('.active');
    if(state) {

      $('.dropdown_btn').removeClass('active').next('.subnav_mob')
      .slideUp();
    } else {

      $('.dropdown_btn').addClass('active').next('.subnav_mob').slideDown();
      $.closest('.dropdown_btn').siblings('.dropdown_btn')
      .find('.dropdown_mob').slideUp().end();
      $.find('.dropdown_btn').not(this).removeClass('active');
    }
  })
})

Answer 1

您的第一个问题是$('dropdown_button')选择具有相同类的每个元素，而不仅仅是您单击的元素。因此，对其进行操作将立即对每个下拉列表进行操作。您可能已经注意到，单击一个按钮会导致每个下拉列表打开，单击另一个按钮会导致所有下拉列表再次关闭。这就是原因。

你的第二个问题是$.closest不是一件事。如果你按F12并检查控制台，你会注意到该行引发了一个错误，说是“最接近的”＃39;不是一个功能。它实际上是未定义的，并且尝试将其作为具有()的函数调用它会导致此错误。这可以防止在此点之后运行任何代码，但即使您修复此代码仍然因类似原因而无法工作。例如，$.find也不是一个函数。 closest和find，如next和slideup，是jQuery实例上的方法，而不是全局jQuery对象本身。

这应该有效。请注意，$(this)是指包含在JQuery实例中的clicked元素：

$(document).ready(function() {
  $('.dropdown_btn').on('click', function() {
    var state = $(this).is('active');
    if(state) {
        $(this).removeClass('active')
            .next('.subnav_mob').slideUp();
    } else {
      $(this).addClass('active')
          .next('.subnav_mob').slideDown();
      $(this).siblings('.dropdown_btn').removeClass('active')
          .next('.subnav_mob').slideUp();
    }
  })
})

我建议逐步完成每个调用，将其与jQuery documentation进行比较，以确保您理解它。我也可能建议在没有jQuery的情况下尝试这样做 - 使用原始代码片段正在进行的原生DOM API。这样的练习可能令人沮丧，但很有价值。

打开另一个下拉列表时隐藏兄弟姐妹

1 个答案: