Смешивание JQuery toggle () с #anchors - PullRequest
Новая
       12

Смешивание JQuery toggle () с #anchors

0 голосов
/ 16 марта 2009

Привет, у меня следующая дилемма: У меня есть набор DIV с дочерними DIVS, которые скрыты по умолчанию. Изначально я использовал javascript и onclick с якорями для достижения эффекта переключения и перехода на якорь. Теперь, когда я перешел на альтернативу JQuery, у меня возникли проблемы с воспроизведением того же эффекта «переход на якорь». Переключение работает просто отлично.

Когда вы щелкаете ссылку «h2 a» в родительском div, дочерний div показывается переключателем. Вот пример настройки родительского и дочернего div: 

<div class="full email">
<a id="test_anchor"></a>
  <h2 class="subsubtitle"><a href="#test_anchor">TITLE AND LINK</a></h2>
  <div class="description full">
  <p>THIS IS WHAT SHOWS ALL THE TIME, REGARLDESS OF THE TOGGLE</p>
  </div><!-- #description ends here -->

     <div id="c_1">
     THE DIV AND THE CONTENTS THAT ARE SHOWN AND HIDDEN
     </div><!-- #c_1 div ends here -->

</div><!-- .full .email ends here -->

// А вот JQuery: 

$(document).ready(function(){

$("#c_1,#c_2,#c_3,#c_4").hide();

$("div div h2 a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow") },
    function() { $(this).parent().siblings("div:last").hide() }

    );

});

Теперь возникает вопрос: как мне активировать или повторно активировать этот #anchor, чтобы ОБЪЯВЛЯТЬСЯ функции JQuery slideDown / hide и старый go-to-anchor goold?

С уважением G.Campos

Ответы [ 2 ]

1 голос
/ 16 марта 2009

То, что вы делаете с функцией переключения, это переключение видимости соответствующих элементов, а не того, что внутри них.

Попробуйте что-то вроде этого: 

$(function (){
  $("#c_1,#c_2,#c_3,#c_4").hide(); // good practice to hide in JS instead of CSS file :)

  // Assign toggle functionality.
  $("h2.subsubtitle a").click(function (){
    var jDiv = $(this).parent().siblings("div:last");

    if( jDiv.is(":visible") ){
      jDiv.hide("slow"); // you're toggling this div, not the anchor.
    } else {
      jDiv.show("slow");
    }

    return true; // if switched to false, anchor won't link to anything.
  });
});
0 голосов
/ 17 марта 2009

Вы пытались достичь что-то вроде этого ?

Соответствующий код jQuery 

$(function(){

    $("#c_1").hide();

    $("h2.subsubtitle a").toggle(
     function () { $(this).parent().siblings("div:last").slideDown("slow"); return false;},
     function () { $(this).parent().siblings("div:last").slideUp("slow"); return false; }                      
    );

});

EDIT:

В ответ на ваш комментарий я поместил ряд разделов «показать / скрыть» на в этом примере , и все выглядит нормально для меня в IE6 и Firefox 3. Вы можете редактировать код для него добавив /edit на URL. Этот пример хорошо работает для вас, и какой браузер вы используете?

...