javascript - 从头开始构建的 super 菜单 - Jquery 调整大小

Question

我正在构建一个大型菜单，并希望它尽可能轻量级。

HTML:

<div id="menu-wrapper">
  <ul class="nav">
    <li><a href="#">Category A</a>
      <div class="block">
        <h3>Category A</h3>
        <div class="nav-column">
          <ul>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                  <li><a href="#">Link #5</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="home">
            <h3>Featured Products</h3>
            <div class="featured">
                <p>Lorum Ipsum...</p>
            </div>
        </div>
      </div>
    </li>
    <li><a href="#">Category B</a>
      <div class="block">
        <h3>Category B</h3>
        <div class="nav-column">
          <ul>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                  <li><a href="#">Link #5</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="home">
            <h3>Featured Products</h3>
            <div class="featured">
                <p>Lorum Ipsum...</p>
            </div>
        </div>
      </div>
    </li>
    <li><a href="#">Category C</a>
      <div class="block">
        <h3>Category C</h3>
        <div class="nav-column">
          <ul>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                  <li><a href="#">Link #5</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="home">
            <h3>Featured Products</h3>
            <div class="featured">
                <p>Lorum Ipsum...</p>
            </div>
        </div>
      </div>
    </li>
  </ul>
</div>

当然还有更多的嵌套有序列表，但这是您的基本层次结构。

我想做的是创建一个 jQuery 函数来执行高度检查:

当您将鼠标悬停在 .nav > li > a 上时，jQuery 会检查所有 .sub-columns AND .home 落在它下面，只有那些，当你滚下时，高度检查会重置，所以你可以检查下一个 .nav > li > a。

我最近被指向了THIS可能的解决方案，但它正在检查 .sub-columns 的 ALL 而不仅仅是 下的 .sub-columns .nav > li > a 我在上面盘旋。

我觉得我已经完成了 90%，但我只是没有指出或引用正确的父-子-兄弟元素来使其正常工作。

提前致谢。

Answer 1

如果我没理解错的话，你想要类似下面的东西。

$(".nav > li > a").hover(function(){

    var subColumns = $(this).next().find(".sub-column");

});

next() 函数获取包含该链接的所有子列的 div block (导航列)。然后我做了一个 find() 因为它是嵌套在它下面的几个元素。 这是一个 fiddle提醒它找到的子列的数量。