在jquery中选择子Li时未选择Li父元素
Li parent elemnt is not selected on child li selection in jquery
我已经编写了代码,使li在url的基础上处于活动状态。它运行良好,但在子li上失败。它使子li处于活动状态,而我希望顶部li应该处于活动状态而不是子级。我的代码如下:
<script type="text/javascript">
jQuery(function () {
setNavigation();
});
function setNavigation() {
// this portion code make li active on url basis
var pathname = window.location.pathname;
path = pathname.replace(/'/$/, "");
path = decodeURIComponent(path);
var value = jQuery(location).attr('href');
// value = value.replace('.html', ''); alert(value);
jQuery(".flexy-menu a").each(function () {
var href = jQuery(this).attr('href');
if (value === href) {
jQuery(this).closest('li').addClass('active');
}
});
// this is code for child li but only first code works
jQuery('.flexy-menu').children('li').click(function(){
jQuery(this).parent('li').addClass('active');
});
}</script>
我的HTML是这样的:
<ul class="flexy-menu orange">
<li style=""><a href="http://example.com/">Home</a></li>
<li style=""><a href="JavaScript:void(0)">Collection</a>
<ul style=""> <li><a href="http://example.com/my-secret-garden.html">My Secret Garden </a></li>
<li><a href="http://example.com/legend.html">Legend</a></li></ul>
</li>
<li class="active" style=""><a href="http://example.com/artisans">Artisans</a></li>
<li style=""><a href="http://example.com/contacts">Contact </a></li>
</ul>
不使用父级.closest()
:
jQuery(this).closest('li').addClass('active');
并将其放入文档中:
jQuery(function () {
setNavigation();
jQuery('.flexy-menu').find('li').click(function(){
jQuery(this).closest('li').addClass('active');
});
});
在这里,我用.find()
而不是.children()
稍微更改了您的选择器,因为.find()
也会查找grand-child,如果您想遍历到父级,则使用.closest()
方法。
我已经写了代码,使li在url的基础上活动
好吧!然后你可以选择这样做:
$('a[href*="'+ path +'"]').parents('li').addClass('active');
这应该起作用:
All to All你只需要做这件事,不需要额外的功能:
jQuery(function () {
var path = window.location.pathname;
$('a[href*="'+ path +'"]').parents('li').addClass('active');
jQuery('.flexy-menu').find('li').click(function(){
jQuery(this).closest('li').addClass('active');
});
});
jQuery('.flexy-menu > li').click(function(e){
jQuery(this).closest('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
演示:
http://jsfiddle.net/hqPQu/
相关文章:
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 如何在选择子li时将父li类设置为活动
- 如何根据下拉菜单中选择的内容为li项分配不同的类
- 为什么使用 .next() 选择所有 li 项而不是一个
- 如何使用 jQuery 选择上一个 LI
- Jquery #id ul li 一个选择
- 转换UL->li inot为同位素过滤菜单选择的列表
- 通过从li中选择一个值来自动完成具有多个值的文本框
- 如何在 LI 上触发“选择”事件,由其 ID 标识
- 转到 指定文本 在基于 ul li 的选择框中
- 可排序的 Js 在带有选择/选项标签的 chrome 中不起作用,但与 ul/li 标签一起工作
- 选择 li 元素中的文本,而不是子元素
- 在选择 li 后使用 JSP 自动完成,建议文本输入丢失其选择器
- 在选择li项时更改无序列表的值
- 使用JQuery选择li元素内的第一个锚点
- 如果存在,请选择li classname
- 在jquery中选择子Li时未选择Li父元素
- JQuery菜单a href选择li
- jQuery:在活动查询上面选择li
- JQuery选择li进行分页