Question

我有一个div

<div class="top_region" id="region">
    <span class="logged_email">
    <?= $string; ?>
    </span>
    <div class="top_arrow" style="cursor: pointer;" id="top_arrow_reg">
    <?= img('css/img/top_arrow.png'); ?>
    </div>
    <ul class="top_submenu" style="cursor: default;" id="top_submenu_reg">
        <li>
        <a href="<?= base_url() ?>region/bishkek">bishkek</a>
        </li>
        <li>
        <a href="<?= base_url() ?>region/osh">osh</a>
        </li>
    </ul>
    </div>

目的是UL标签需要具有与div相同的宽度，但问题是当我重新加载页面时，UL的宽度比div高一点，但是当我点击LI时链接，然后它正常，div宽度== ul宽度，但我不明白为什么会发生这种情况???

我正在使用JQuery

$("#top_arrow").toggle(function(){

            $("#top_submenu").slideDown(500);


    }, function(){

        $("#top_submenu").slideUp(500);

    })

var width = $(".top_region").width();
$(".top_submenu").width(width);

有人可以解释这一刻吗？以及如何解决它？

CSS

div.top_region
{
    display: inline-block;
    margin-right: 40px;
    margin-left: 20px;
}
div.top_region  ul.top_submenu
{
    /*width: 100px;*/
    /*left: -105px;*/
    margin: 0;
    padding: 0;
}
span.logged_email
{
    background: #333335;
    color: #dbdcde;
    font-size: 10pt;
    padding: 5px;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: bold;
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
}
div.top_arrow
{
    display: inline-block;
    margin-left: 1px;
    position: relative;
    behavior: url('border-radius.htc');
    width: 20px;
}
div.top_arrow img
{
    border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    behavior: url('border-radius.htc');
    margin-top: 1px;
}
ul.top_submenu
{
    position: absolute;
    display: none;
    background: #303030;
    font-size: 8pt;
    display: none;
    /*width: 180px;*/
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0;
    /*left: -170px;*/
    padding-left: 5px;
    padding-right: 5px;
    height: 70px;
    color: white;
}
ul.top_submenu li
{
    border-bottom: 1px solid #969696;
    padding-left: 3px;
}
ul.top_submenu li:last-child
{
    border-bottom: none;
}
ul.top_submenu li a
{
    text-decoration: none;
    color: white;
}

Answer 1

这正是原因：

var width = $(".top_region").width();
$(".top_submenu").width(width);

他们的宽度相等。做到：

var width = $(".top_region").width();
$(".top_submenu").width(width-2);

更新：你的代码中有一些错误。请看我的小提琴： http://jsfiddle.net/LwGJX/7/

为什么宽度在页面重新加载之前和之后发生变化（JQuery）

1 个答案: