Question

我正在使用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;
  }

Answer 1

是您的边距，填充，边框，轮廓设置为0？

尝试：

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

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

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

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

通过这种方式，它不会神奇地增加额外的高度。

Answer 2

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

的CSS：

* {margin:0; padding:0;}

jQuery：给下拉菜单一个高度

2 个答案: