为什么之前和页面重新加载（JQuery的）

我有一个div为什么之前和页面重新加载（JQuery的）

<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标签必须具有相同的宽度为股利，但问题是，当我重新加载页面，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; 
}

来源

2012-03-30 yeah its me

还含糊不清。你有这个CSS吗？我也没有在HTML中看到'.top_region'或'.top_submenu'。你能发布所有相关的代码吗？ – Joseph 2012-03-30 09:37:16

只是增加了更多的代码 – 2012-03-30 09:57:22

这正是为什么：

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

它们的宽度相等。使其：

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

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

来源

2012-03-30 09:41:26 Elen

谢谢，但这是行不通的，因为跨度内的值发生变化，并且宽度正在变化，但问题是当我使ctrl + r和UL宽度超过父div ，但如果我点击链接，然后它得到正常 – 2012-03-30 09:54:33

以及最初没有任何跨度..仍然如果你运行上面的代码页面加载 - 它应该作为您的跨越形成的PHP之前，它输出到浏览器。否则提供更多细节？ – Elen 2012-03-30 09:59:27

我刚更改了代码，希望它能帮到 – 2012-03-30 10:02:03

为什么之前和页面重新加载（JQuery的）

回答

相关问题