大佬教程收集整理的这篇文章主要介绍了在jQuery中移动多个父母 – 更高效的方式?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
基本上,导航默认情况下已折叠,但如果用户点击子列表中的页面,我想显示父列表.如果是子列表的子列表,我需要两个父列表来显示.我已经设置好了,但是我不喜欢把.Parent().parent()的向上遍历来展开列表.有更有效的方式吗?
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>
jQuery:
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);
任何和所有的帮助是主要的赞赏.
@H_675_14@// 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();
parents()和siblings()方法对于这种事情都是伟大的.
编辑:在没有显示父母兄弟姐妹之前有一个错误.尝试这个新版本.
编辑2:现在它可以在锚点上而不是列表项目中的class =“active”工作.
@H_675_14@ @H_675_14@以上是大佬教程为你收集整理的在jQuery中移动多个父母 – 更高效的方式?全部内容,希望文章能够帮你解决在jQuery中移动多个父母 – 更高效的方式?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。