0

我得到了这个 HTML 代码：

<div class="tab">
    <a href="#">SPECS</a>
    <div class="sub-menu">
        <a href="#">Specs 1</a>
        <a href="#">Specs 2</a>
        <a href="#">Specs 3</a>
    </div>
</div>
<div class="tab">
    <a href="#">GALLERY</a>
    <div class="sub-menu">
        <a href="#">Gallery 1</a>
        <a href="#">Gallery 2</a>
        <a href="#">Gallery 3</a>
    </div>
</div>

我想要做的是，我不想在 CSS 中指定 .sub-menu 的宽度，我希望它是动态的，与 div 的内容不同。我试着用 jQuery 来做这个：

var width = $(".sub-menu").width();
$(".sub-menu").css("width", width);

但它不起作用，它为所有 .sub-menu div 提供了 0px 的宽度。我可能想使用 .each 函数，所以每个 .sub-menu 都会获得它的宽度并作为 css 应用。我希望我足够清楚。

谢谢。

4

4 回答 4

1

将此添加到您的 CSS 中：

.sub-menu {display:inline-block}

这将使菜单采用其内容所需的宽度，仅此而已。

于 2013-09-09T17:43:25.417 回答
1

事情是width()返回一个数字。但 CSS 规则要求Npx. 用这个：

var width = $(".sub-menu").width() + "px";
$(".sub-menu").css("width", width);
于 2013-09-09T17:44:50.043 回答
0 
$(function() {

  var smWidth = $(".sub-menu").width();

  $(".sub-menu").css({ width: smWidth + 'px' });

});
于 2013-09-09T21:06:52.420 回答
0 
<script>
jQuery(document).ready(function(){
    $( ".sub-menu" ).each(function( index ) {
        width=$(this).width();
        $(this).css('width',width+'px');
    });
});
</script>
于 2013-09-09T17:53:33.827 回答