javascript - 使用 jquery 或 javascript 为父子属性创建手风琴式下拉菜单
问题描述
在stackoverflow的帮助下,我设法拼凑了以下jquery:
jQuery( document ).ready(function() {
jQuery(".product-categories .cat-item-17").attr("data-toggle", "collapse").attr("role",
"button").attr("aria-expanded", "false").attr("aria-controls", "collapseMenu").attr("href",
"#childcats1").attr("id", "parent-sidebar");
jQuery(".product-categories .cat-item-17 .children").attr("id", "childcats1").addClass("collapse");
});
jQuery( document ).ready(function() {
jQuery(".product-categories .cat-item-22").attr("data-toggle", "collapse").attr("role",
"button").attr("aria-expanded", "false").attr("aria-controls", "collapseMenu").attr("href",
"#childcats2").attr("id", "parent-sidebar");
jQuery(".product-categories .cat-item-22 .children").attr("id", "childcats2").addClass("collapse");
});
上面的脚本为我在 Wordpress 中的每个父类别添加了各种属性(第一个 li 类为“cat-parent”),并为子类别添加了 href 的 ID(嵌套的 ul 类为“children” )。这是为了创建一个引导手风琴风格的导航下拉菜单。请参阅下面的输出 html:
<ul class="product-categories">
<li class="cat-item-17 cat-parent current-cat-parent collapsed" data-toggle="collapse" role="button"
aria-expanded="false" aria-controls="collapseMenu" href="#childcats1" id="parent-sidebar">
<a href="https://www.example.com/clothing/">Clothing</a>
<ul class="children collapse" id="childcats1" style="">
<li class="cat-item cat-item-20"><a
href="https://www.example.com/clothing/accessories/">Accessories</a></li>
<li class="cat-item cat-item-19"><a href="https://www.example.com/clothing/hoodies/">Hoodies</a>
</li>
<li class="cat-item cat-item-18 current-cat"><a
href="https://www.example.com/clothing/tshirts/">Tshirts</a></li>
</ul>
</li>
<li class="cat-item cat-item-22 cat-parent collapsed" data-toggle="collapse" role="button" aria-
expanded="false" aria-controls="collapseMenu" href="#childcats2" id="parent-sidebar">
<a href="https://www.example.com/decor/">Decor</a>
<ul class="children collapse" id="childcats2" style="">
<li class="cat-item cat-item-31"><a href="https://www.example.com/decor/pennants/">Pennants</a>
</li>
</ul>
</li>
</ul>
问题是当我在 Wordpress 中创建一个带有子项的新父菜单项时,我必须编辑我的 jquery 脚本以添加新的 cat-parent 和 children ID。
有没有办法防止必须使用某种 foreach 脚本来执行此操作,即:
foreach cat-parent 添加属性+唯一href ID,并为孩子ul添加唯一ID?
谢谢你的帮助。
解决方案
您可以使用.each
循环li
然后使用$(this)
添加属性到您的lis
.Also,添加 id 到您children
可以使用$(this).find(".children")
这将引用孩子 ul 然后在那里添加属性。
演示代码:
//loop through li
$(".product-categories > li").each(function(i) {
//use this to refer current li
$(this).attr("data-toggle", "collapse").attr("role",
"button").attr("aria-expanded", "false").attr("aria-controls", "collapseMenu").attr("href",
`#childcats${i}`).attr("id", `parent-sidebar${i}`);
//use .find to get children ul and add if there
$(this).find(".children").attr("id", `childcats${i}`).addClass("collapse");
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="product-categories">
<li class="cat-item-17 cat-parent current-cat-parent collapsed">
<a href="https://www.example.com/clothing/">Clothing</a>
<ul class="children" style="">
<li class="cat-item cat-item-20"><a href="https://www.example.com/clothing/accessories/">Accessories</a></li>
<li class="cat-item cat-item-19"><a href="https://www.example.com/clothing/hoodies/">Hoodies</a>
</li>
<li class="cat-item cat-item-18 current-cat"><a href="https://www.example.com/clothing/tshirts/">Tshirts</a></li>
</ul>
</li>
<li class="cat-item cat-item-22 cat-parent collapsed">
<a href="https://www.example.com/decor/">Decor</a>
<ul class="children" style="">
<li class="cat-item cat-item-31"><a href="https://www.example.com/decor/pennants/">Pennants</a>
</li>
</ul>
</li>
</ul>
推荐阅读
- javascript - 错误:找不到模块 './commands/${f}1'
- algorithm - 为什么 Dijkstra + priority_queue 与 Dijkstra + queue 相比表现最差?
- python - 如何在 Django 查询中获取特定字段?
- python - 将句子拆分成单词 pandas 并保留标签
- reactjs - Otp 验证仅在用户第一次安装应用程序以响应本机与 saga 时
- typescript - 使用 eslint 从 graphql 解析器返回什么严格的打字稿类型?
- javascript - 如何使用 javascrip/jQuery 对表列求和?
- amazon-web-services - 使用 Contigo IdentityPoolId 访问未经身份验证的 AWS S3,错误:CredentialsError:配置中缺少凭据
- asp.net-core - JQuery可排序函数返回空字符串
- html - 请问为什么CSS没有对我的HTML代码生效?