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>

当然还有更多嵌套的onorderdered列表，但那是你的基本层次结构。

我要做的是创建一个执行高度检查的jQuery函数：

当你在.nav > li > a上玩时，jQuery会检查属于它的所有.sub-columns AND .home的高度，并且仅限于此，当您滚动时，高度检查会重置，因此您可以检查下一个.nav > li > a。

我最近指出了THIS可能的解决方案，但它正在检查.sub-columns的所有而不仅仅是.sub-columns .nav > li > a下的{{1}}我正在徘徊过来。

我觉得我90％都在那里，但我只是没有指向或引用正确的父子兄弟元素以使其正常工作。

提前致谢。

Answer 1

如果我理解得对，你需要以下内容。

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

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

});

next（）函数获取div块（nav-column），其中包含该链接的所有子列。然后我做了一个find（）因为它嵌套了几个元素。这是一个fiddle，可以提醒它找到的子列数。

从头开始构建的Mega菜单 - Jquery重新调整大小

1 个答案: