Question

我有一个下拉菜单，我试图让子菜单与顶级页面的宽度相同。

我的HTML结构就像这样（这是一个wordpress主题，因此我几乎无法控制文档结构）：

<ul class="menu">
    <li class="menu-item-has-children menu-item">
        <a>Top Level Page 1</a>
        <ul class="submenu">
            <li class="menu-item-has-children menu-item">Sub Page 1</li>
            <li>Sub Page 2</li>
            <li>Sub Page 3</li>
        </ul>
    </li>
    <li class="menu-item-has-children menu-item">
        <a>Top Level Page 2 which has a different width</a>
        <ul class="submenu">
            <li>Sub Page 4</li>
            <li>Sub Page 5</li>
            <li>Sub Page 6</li>
        </ul>
    </li>
</ul>

我首先转向CSS：

ul.menu li ul {
    width: 100%;
}

...但由于某种原因，这使得它成为ul.menu的宽度。我也试过把＆＃34;宽度：100％＆＃34;在其他地方，但没有这样的运气。

我决定转向jquery，受到this post的启发。我最初尝试过这个：

$('ul.menu li ul').width($(ul.menu li).width());

...但它只是将所有子菜单设置为第一个li的宽度，忽略了父母关系。

我已经尝试过以下各项来选择该特定ul的父母（或兄弟姐妹a，以及确定宽度的是什么），但似乎没有一个工作：

$('ul.menu li ul').width($(this).parent('li').width());

$('ul.menu li ul').width($(this).parent().width());

$('ul.menu li ul').width($(this).parent('li').children('a').width());

$('ul.menu li ul').width($(this).siblings('a').width());

你不能在这种情况下使用$ this吗？如果是这样，那么实现我想要做的事情的更好方法是什么？

Answer 1

你正在思考这个：

.menu{
   width: 20vw; //view width 
   position: relative;
}

.submenu{
    position: absolute;
    left: 0;
    width: 20vw;
}

假设您没有将.menu的任何子元素定义为相对或绝对，这会将子菜单与.menu的左侧对齐，显然宽度定义为相同。

<强>编辑：

使用谷歌浏览器检查器查看哪些css规则应用于元素，但有几个例子说明可以用css做什么。

自然流程（子菜单是一个块项目，将填充父项宽度 https://jsfiddle.net/cpe0pqhk/

或定义的规则 https://jsfiddle.net/z011176r/1/

现在是jQuery版本：

在解释之前，您应该注意：

jQuery需要包含在前端 - 这是用于更改css值的大量代码，这需要时间让用户下载和使用

使用jQuery时，您需要在尝试使用之前等待库加载（因此在示例中为doc。准备好）。这可能意味着较慢的连接，用户将看到发生的变化。

WP希望将单词jQuery作为调用而不是$来生成错误（请检查您的控制台）

jQuery(document).ready(function(){

//return a list of dom items that match the selector
//each ilterates over the list
    jQuery('.menu > li').each(function(){
        //this refers to the current element in the list we are working with
        console.log(this);
        var wt= jQuery(this).width();
        //search within this element for the element we want and set width
        jQuery(this).find('.submenu').width(wt);
    });
})

的jsfiddle： https://jsfiddle.net/71dyqjvr/1/

获取元素的宽度并应用于第一个元素的另一个相对位置？

1 个答案: