Question

我有这个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菜单的宽度，我希望它是动态的，不同于div的内容。我尝试用jQuery做这个：

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

但它不起作用，它给所有的.sub-menu divs宽度为0px。我想要使用.each函数，所以每个.sub菜单都会得到它的宽度并应用为css。我希望我很清楚。

感谢。

Answer 1

将此添加到您的CSS：

.sub-menu {display:inline-block}

这将使菜单占用其内容所需的宽度，不再是。

Answer 2

问题是width()返回一个数字。但CSS规则需要Npx。使用此：

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

Answer 3

<script>
jQuery(document).ready(function(){
    $( ".sub-menu" ).each(function( index ) {
        width=$(this).width();
        $(this).css('width',width+'px');
    });
});
</script>

Answer 4

$(function() {

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

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

});

我无法让jquery .width（）工作

4 个答案: