jQuery：给下拉菜单一个高度答案

【问题标题】：jQuery: Giving Dropdown Menu a HeightjQuery：给下拉菜单一个高度
【发布时间】：2014-10-22 05:00:49
【问题描述】：

我正在使用 jQuery 在下拉菜单打开时为其指定高度，以便在菜单下拉时将其下方的内容向下推。但是高度太高（102px）；我认为它应该更像 50px，但它似乎给菜单提供了额外的高度，我似乎不明白为什么。我希望高度只是文本的高度，并且下面没有空白。

jQuery:

$(document).on('click', '#navpanel .mainnav a[href^="/#"]', function(e) {
    if ($(this).parent('li').hasClass('expanded')) {
        $(this).siblings('ul').css('display', 'block').slideDown('linear', function() {
            $(this).parent('li').toggleClass('expanded');

        });
    } else {
        $(this).siblings('ul').css('display', 'none').slideUp('linear', function() {
            $(this).parent('li').toggleClass('expanded');
        });
    }
    var objHeight = 0;
    $.each($('ul.tier1').children(), function() {
        objHeight += $(this).height();
    });
    $('ul.tier1').height(objHeight);
});

HTML：

<div class="mainnav">
    <ul class="tier1">
        <li id="blog">blog</li>
        <li class="">
            <a class="tier1title" href="/collections/newarrivals">New Arrivals</a>
        </li>
        <li class="">
            <a class="tier1title" href="/#">Categories</a>
            <ul class="tier2">
                <li class="">
                    <a href="/collections/knits">Knits</a>
                </li>
                <li class="">
                    <a href="/collections/tops">Tops</a>
                </li>
                <li class="">
                    <a href="/collections/dresses">Dresses</a>
                </li>
                <li class="">
                    <a href="/collections/bottoms">Bottoms</a>
                </li>
                . . .
                <li class="">
                    <a class="tier1title" href="/collections/sale">Sale</a>
                </li>
                <li class="registerform">
                    ...
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

  #navbar #navpanel .mainnav > ul > .active > ul {
    display:block;
    text-align:center;
  }

  #navbar .mainnav > ul > li {
  display: block;
  }

  #navbar #navpanel .mainnav ul.tier1 {
    padding:0;
    margin:0;
    border:0;
    outline:0;
  }

  #navbar #navpanel .mainnav ul.tier1 > li {
    font-size:13px;
    font-family: 'TradeGothicLTStdCnNo.18';
    padding:0 9px;
  }

  #navbar #navpanel .mainnav ul.tier1 > li:first-child {
    padding-right:80px;
    position:relative;
    left:-10px;
  }

  #navbar #navpanel .mainnav ul.tier1 > li:last-child {
    padding:0;
  }

  #navbar #navpanel .mainnav li li {
    text-align:center;
  }

  #navbar #navpanel .mainnav li ul {
    display:none;
  }

  #navbar #navpanel .mainnav ul.tier2 {
    position:absolute;
    height:auto;
    width:600px;
    left: 0;
    right: 0;
    font-size:11px;
    margin:12px auto 0 auto;
  }

  #navbar #navpanel .mainnav ul.tier2 li {
    padding-right:12px;
  }

【问题讨论】：

来自 jquery 文档：“请注意，.height() 将始终返回内容高度，无论 CSS box-sizing 属性的值如何。从 jQuery 1.8 开始，这可能需要检索 CSS 高度加上 box-sizing 属性，然后在元素具有 box-sizing 时减去每个元素上的任何潜在边框和填充：border-box。为避免这种惩罚，请使用 .css("height") 而不是 .height()."。也许它可以帮助
用 css 创建小提琴
@VitorinoFernandes 下拉菜单部分通过 shopify 液体代码工作，所以 jsfiddle 不会这样做。
@EoiFirst 我将其更改为 .css('height')，但它仍然给出相同的高度。 ul 或 li 底部没有边框或填充。
请添加你的css代码。

标签： javascript jquery html css drop-down-menu

【解决方案1】：

最好将此代码添加到您的 css 的第一行以执行您想要的所有操作，而无需浏览器在您网页的不同部分放置填充和边距。

css:

* {margin:0; padding:0;}

【讨论】：

我在样式表中添加了 margin:0 padding:0 order:0 outline:0 。它使高度变短了一点（从 102 像素到 87 像素），所以我猜它确实有效，但似乎还有更多，因为它仍然高于应有的高度。有任何想法吗？谢谢。

【解决方案2】：

您的边距、内边距、边框、轮廓是否设置为 0？

尝试：

$('ul.tier1').css('padding', '0');

$('ul.tier1').css('margin', '0');

$('ul.tier1').css('border', '0');

$('ul.tier1').css('outline', '0');

这样它就不会神奇地增加“额外高度”。

【讨论】：

长。可以在 CSS 中添加。
我在样式表中添加了 margin:0 padding:0 order:0 outline:0 。它使高度变短了一点（从 102 像素到 87 像素），所以我猜它确实有效，但似乎还有更多，因为它仍然高于应有的高度。有任何想法吗？谢谢。