JQuery превключва OL списък със заглавия

Имам 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="/bg#learning_objectives">Learning Objectives</a></li>
  <li><a href="/bg#resources_provided_in_this_lesson">Resources provided in this lesson</a></li>
  <li><a href="/bg#preparation">Preparation</a></li>
  <li><a href="/bg#safety_notes">Safety notes</a></li>
  <li><a href="/bg#background_information">Background information</a></li>
  <li><a href="/bg#vocabulary">Vocabulary</a></li>
  <li><a href="/bg#lesson_in_detail">Lesson in detail</a></li>
  <li><a href="/bg#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>


javascript html toggle jquery anchor
person user2348598    schedule 16.06.2015    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Можете да използвате 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="/bg#learning_objectives">Learning Objectives</a></li>
  <li><a href="/bg#resources_provided_in_this_lesson">Resources provided in this lesson</a></li>
  <li><a href="/bg#preparation">Preparation</a></li>
  <li><a href="/bg#safety_notes">Safety notes</a></li>
  <li><a href="/bg#background_information">Background information</a></li>
  <li><a href="/bg#vocabulary">Vocabulary</a></li>
  <li><a href="/bg#lesson_in_detail">Lesson in detail</a></li>
  <li><a href="/bg#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>

person Arun P Johny    schedule 16.06.2015
comment
Здравей Арун, благодаря за отговора. Този код отваря ли (превключва) съответния раздел? От моя страна не изглежда така. Можеш ли да потвърдиш? Благодаря! - person user2348598; 16.06.2015
comment
Това наистина проработи! страхотно Освен че самата котва спира да работи по някаква причина. Опитвам се да добавя този код към него, но не работи: $('#sections_list li').click(function(){ $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, 500); return false; }); - person user2348598; 17.06.2015