[英]JQuery toggle a OL list with headings
I have an OL list that works as an accordion with jQuery toggle, and I also have a sidebar with anchor links linking to the OL list headings. 我有一个OL列表,可以用作jQuery切换的手风琴,并且还有一个带有锚链接的边栏,这些链接链接到OL列表标题。 I would like to make so that the anchor links link to and toggle open the respective headings.
我想做的是,锚链接链接到并切换打开相应的标题。
Can someone help me add to this script so that when I click on the anchor link, the respective section div opens? 有人可以帮我添加到此脚本中,以便在单击锚链接时打开相应的div部分吗?
Thanks!! 谢谢!!
jQuery('#sections > li > div').hide(); jQuery('#sections > li > h2').click(function(e){ e.preventDefault(); // hide all div var $li = jQuery(this).parent(); var $div = jQuery(this).parent().find('div'); jQuery("#sections > li > div").not($div).hide(); jQuery("#sections > li").not($li).removeClass('active'); // here is what I want to do $div.toggle(); $li.toggleClass('active'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <h2>In this Lesson:</h2> <ol id="sections_list"> <li><a href="#learning_objectives">Learning Objectives</a></li> <li><a href="#resources_provided_in_this_lesson">Resources provided in this lesson</a></li> <li><a href="#preparation">Preparation</a></li> <li><a href="#safety_notes">Safety notes</a></li> <li><a href="#background_information">Background information</a></li> <li><a href="#vocabulary">Vocabulary</a></li> <li><a href="#lesson_in_detail">Lesson in detail</a></li> <li><a href="#acknowledgements">Acknowledgements</a></li> </ol> <ol id="sections"> <li><h2 id="learning_objectives">Learning Objectives</h2> <div>Content...</div> </li> <li><h2 id="resources_provided_in_this_lesson">Resources provided in this lesson</h2> <div>Content...</div> </li> <li><h2 id="preparation">Preparation</h2> <div>Content...</div> </li> <li><h2 id="safety_notes">Safety notes</h2> <div>Content...</div> </li> <li><h2 id="background_information">Background information</h2> <div>Content...</div> </li> <li><h2 id="vocabulary">Vocabulary</h2> <div>Content...</div> </li> <li><h2 id="lesson_in_detail">Lesson in detail</h2> <div>Content...</div> </li> <li><h2 id="acknowledgements">Acknowledgements</h2> <div>Content...</div> </li> </ol>
You can use the href of the anchors to trigger the clicks manually. 您可以使用锚点的href手动触发点击。
$('#sections_list li').click(function(e) {
e.preventDefault();
var href = $(this).find('a').attr('href');
$(href).click();
})
jQuery('#sections > li > div').hide(); jQuery('#sections > li > h2').click(function(e) { e.preventDefault(); // hide all div var $li = jQuery(this).parent(); var $div = jQuery(this).parent().find('div'); jQuery("#sections > li > div").not($div).hide(); jQuery("#sections > li").not($li).removeClass('active'); // here is what I want to do $div.toggle(); $li.toggleClass('active'); }); $('#sections_list li').click(function(e) { e.preventDefault(); var href = $(this).find('a').attr('href'); $(href).click(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <h2>In this Lesson:</h2> <ol id=""> <li><a href="#learning_objectives">Learning Objectives</a></li> <li><a href="#resources_provided_in_this_lesson">Resources provided in this lesson</a></li> <li><a href="#preparation">Preparation</a></li> <li><a href="#safety_notes">Safety notes</a></li> <li><a href="#background_information">Background information</a></li> <li><a href="#vocabulary">Vocabulary</a></li> <li><a href="#lesson_in_detail">Lesson in detail</a></li> <li><a href="#acknowledgements">Acknowledgements</a></li> </ol> <ol id="sections"> <li><h2 id="learning_objectives">Learning Objectives</h2> <div>Content...</div> </li> <li><h2 id="resources_provided_in_this_lesson">Resources provided in this lesson</h2> <div>Content...</div> </li> <li><h2 id="preparation">Preparation</h2> <div>Content...</div> </li> <li><h2 id="safety_notes">Safety notes</h2> <div>Content...</div> </li> <li><h2 id="background_information">Background information</h2> <div>Content...</div> </li> <li><h2 id="vocabulary">Vocabulary</h2> <div>Content...</div> </li> <li><h2 id="lesson_in_detail">Lesson in detail</h2> <div>Content...</div> </li> <li><h2 id="acknowledgements">Acknowledgements</h2> <div>Content...</div> </li> </ol>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.