问题描述
我已经开始设计这个菜单并意识到它比预期的更具挑战性。我正在尝试获取每个子菜单的总项目数 - 下面是我的子菜单结构之一的 html 示例。如果我把它们都包括在内,那就太长了。
在导航菜单上,我希望在右侧子菜单旁边显示计数(见图)。目前我通过css“.accordion-item::before { content:“x”}”有一个“x”。理想情况下,我想保持这种方式,希望我可以将计数作为伪元素。
图片参考:
HTML:
<ul id="navigation" class="drawer-navigation">
<li id="menu-item-" class="menu-item menu-item-parent">
<a class="accordion-item" href="https://www.google.com/">Photography</a>
<ul class="submenu">
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Weddings</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Engagements</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Anniversaries</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Collaborations</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Lookbooks</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Family</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Couples</a>
</li>
</ul>
</li>
</ul>
CSS:
.menu-sidebar ul.drawer-navigation li.menu-item-parent a:not(ul.submenu li a)::before {
content: "×";
display: inline-block;
positiion: relative;
float: right;
vertical-align: middle;
font-size: 22px;
transform-origin: center;
transform: rotate(-45deg);
transition-propery: transform;
transition-duration: 600ms;
transition-timing-function: cubic-bezier(0.16,1,0.19,1);
}
$(document).ready( function() {
var $countSource = $("#navigation");
$countSource.each( function() {
var $countElements = $("li.menu-item-parent ul").children().length;
console.log($countElements);
});
});
解决方法
影响伪 content
变量的方法是将其用作 css3 variable (custom property)。不像常规的伪 CSS 规则(它们不是 DOM 的一部分,因此不能用 javascript 操作)...
自定义属性是普通属性,因此可以在 任何元素,都通过正常的继承和级联解决 规则,可以用@media 和其他条件设置 规则,可以在 HTML 的样式属性中使用,可以使用读取或设置 CSSOM等
我调整了css规则。您可以使用 >
仅表示顶级元素,因此您不必使用 :not
。
$(document).ready(function() {
$("#navigation > li > a").each(function() {
let len = $(this).parent().find('.submenu').children().length;
$(this).css('--content',`'${len}'`);
});
});
.menu-sidebar {
width: 200px;
}
.menu-sidebar ul.drawer-navigation>li.menu-item-parent>a:before {
content: var(--content,"g");
display: inline-block;
position: relative;
float: right;
vertical-align: middle;
/* font-size: 22px;
transform-origin: center;
transform: rotate(-45deg);
transition-property: transform;
transition-duration: 1600ms;
transition-timing-function: cubic-bezier(0.16,1,0.19,1);*/
}
.submenu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='menu-sidebar'>
<ul id="navigation" class="drawer-navigation">
<li id="menu-item-" class="menu-item menu-item-parent">
<a class="accordion-item" href="https://www.google.com/">Photography</a>
<ul class="submenu">
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Weddings</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Engagements</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Anniversaries</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Collaborations</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Lookbooks</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Family</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Couples</a>
</li>
</ul>
</li>
<li id="menu-item-" class="menu-item menu-item-parent">
<a class="accordion-item" href="https://www.google.com/">Fashion</a>
<ul class="submenu">
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Lookbooks</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Family</a>
</li>
<li id="submenu-item-" class="submenu-item">
<a href="www.google.com">Couples</a>
</li>
</ul>
</li>
</ul>
</div>