移动了多父母在jQuery更有效的方式?
-
20-09-2019 - |
题
因此,我们导航,这是一个列表,并已子表和子表.
基本上,nav是默认情况下崩溃,但是如果有人点击网页的一个子列表,我想告诉父母的清单。如果它是一个子列表中的一个子列表,我需要父母列表显示。我把它设置,但是,我不喜欢把5.父().父母()'s到横向上展开列表。是否有更有效的方式?
该HTML:
<div id="lesson-sidebar">
<ul>
<li><a href="index.html">Welcome to Beat Basics and Beyond</a></li>
<li><a href="table-of-contents.html">What's in this course?</a></li>
<li><a href="defining-your-beat.html" class="active">Defining Your Beat</a>
<ul>
<li><a href="boundaries-of-your-beat.html">Boundaries of Your Beat</a></li>
<li><a href="the-beat-description.html">The Beat Description</a></li>
<li><a href="build-your-own-beat-description.html"><span class="ital">Activity:</span> Build Your Own Beat Description</a></li>
</ul>
</li>
<li><a href="getting-started.html">Getting Started</a>
<ul>
<li><a href="debrief-your-predecessor.html">Debrief Your Predecessor</a></li>
<li><a href="predecessor-top-five-tips.html"><span class="ital">Activity:</span> List The Top Five Tips From Your Predecessor</a></li>
<li><a href="covering-your-beat-with-the-internet.html">Covering Your Beat With The Internet</a></li>
<li><a href="get-in-the-car-and-go.html">Get in the Car and Go</a></li>
<li><a href="mapping-your-beat.html">Mapping Your Beat</a></li>
<li><a href="read-the-clips.html">Read the Clips</a></li>
<li><a href="activity-dissect-this-clip.html"><span class="ital">Activity:</span> Dissect This Clip</a></li>
<li><a href="writing-your-first-article.html">Writing Your First Article</a></li>
<li><a href="starting-cold-on-the-beat.html">Starting Cold on the Beat</a></li>
</ul>
</li>
<li><a href="working-with-sources.html">Working With Sources</a>
<ul>
<li><a href="finding-sources.html">Finding Sources</a></li>
<li><a href="diversify-your-sources.html">Diversify Your Sources</a></li>
<li><a href="prospecting-for-stories-and-sources.html">Prospecting for Stories and Sources</a></li>
<li><a href="building-relationships.html">Building Relationships</a></li>
<li><a href="going-off-the-record.html">Going Off the Record</a></li>
</ul>
</li>
<li><a href="developing-resources.html">Developing Resources to Help You on the Beat</a>
<ul>
<li><a href="develop-a-calendar-of-events.html">Develop a Calendar of Events</a></li>
<li><a href="build-your-library.html">Build Your Library</a></li>
<li><a href="learn-the-open-record-laws.html">Learn the Open Record Laws</a></li>
</ul>
</li>
<li><a href="extra-resources.html">Extra Resources</a>
<ul>
<li><a href="beat-breakdown-tool.html">Beat Breakdown Tool</a></li>
<li><a href="links-library.html">Links Library</a>
<ul>
<li><a href="general-resources-for-any-beat.html">General Resources for Any Beat</a></li>
<li><a href="courts-and-criminal-justice-links.html">Courts and Criminal Justice Links</a></li>
<li><a href="education-resources.html">Education Resources</a></li>
<li><a href="local-government-links.html">Local Government Links</a></li>
<li><a href="neighborhood-or-suburban-links.html">Neighborhood or Suburban Links</a></li>
<li><a href="police-and-public-safety-links.html">Police and Public Safety Links</a></li>
<li><a href="reporter-organizations.html">Reporter Organizations</a></li>
</ul>
</li>
<li><a href="additional-reading.html">Additional Reading</a></li>
</ul>
</li>
<li><a href="final-thoughts.html">Final Thoughts</a></li>
</ul>
S:
function toggleSubmenu() {
if ($(this).hasClass('submenu-hidden')) {
$(this).parent().children('ul').slideToggle();
$(this).removeClass().addClass('submenu-visible');
} else if ($(this).hasClass('submenu-visible')) {
$(this).parent().children('ul').slideToggle();
$(this).removeClass().addClass('submenu-hidden');
}
}
$('#lesson-sidebar ul ul').hide();
$('#lesson-sidebar ul ul ul').hide();
$('#lesson-sidebar ul:first-child').attr('id', 'rootlist');
$('#lesson-sidebar ul li:has("ul")').prepend('<span class="submenu-hidden"></span>').css('list-style','none');
$('#lesson-sidebar ul li a').each(
function() {
if ($(this).hasClass('active')) {
// if it is a UL
var length = $(this).parent().find("ul").length;
alert(length);
if (length == 0) {
if ($(this).parent().parent().parent().children('span').hasClass('submenu-hidden')) {
$(this).parent().parent().parent().children('ul').show();
$(this).parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
}
if ($(this).parent().parent().parent().parent().parent().children('span').hasClass('submenu-hidden')) {
$(this).parent().parent().parent().parent().parent().children('ul').show();
$(this).parent().parent().parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
}
}
if (length == 1) {
$(this).parent().find('ul').slideToggle();
$(this).parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
}
}
}
);
$('ul#rootlist > li span, ul#rootlist li ul li > span').bind('click', toggleSubmenu);
任何和所有帮助是主要的赞赏。
解决方案
如果我理解什么你想要做的...你可以做像这样的东西:
// For my benefit, hide all lists except the root items
$('ul, li', $('#lesson-sidebar ul li')).hide();
// Show active parents and their siblings
$('li a.active').parents('ul, li').each(function() {
$(this).siblings().andSelf().show();
});
// Show the active item and its siblings
$('li a.active').siblings().andSelf().show();
编辑:有一个错误之前,它没有显示父母的兄弟姐妹。试试这个新的版本。
编辑2:现在它的工作与class="活动"在锚上,而不是列出项目。
其他提示
$(this).closest("ul")
将遍历父母,直到它找到一个ul
http://docs.jquery.com/Traversing/closest#expr
...获得,通过将自身测试元件,并通过其在DOM树中的祖先...
向上遍历选择器相匹配的第一元素
要简化兰斯McNeary的非常有用的答案,关键是要使用:
.parents([selector])
鉴于表示一组DOM元素的jQuery对象,该 。家长()方法允许我们通过对这些祖先搜索 DOM树中的元素和构造从一个新的jQuery对象 从匹配上了直接父有序元素;要素 返回以便从最近的父到外部的。
另一个用户建议:
.closest([selector])
类似。家长(),这可能是更好的选择,因为它一旦停止它发现它正在寻找的元件。好像这将是在这种情况下更有效。 请参见 http://api.jquery.com/closest/ 了解更多详情。 希望这有助于人们了解.closest()和。家长()和多么强大和灵活的jQuery能之间的差异。
$(this).parents().get()[4]
会给你第五
尝试使用此代码行:
$(this).parent().parent().fadeOut();
不隶属于 StackOverflow