我有一个OL列表作为手风琴使用jQuery切换,我还有一个带有锚链接的侧边栏链接到OL列表标题。我想这样做,以便锚链接链接并切换各自的标题。
有人可以帮我添加这个脚本,这样当我点击锚链接时,相应的部分div会打开吗?
谢谢!
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>
答案 0 :(得分:0)
您可以使用锚点的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>