2013-10-29 2 views
0

다음 코드 스 니펫을 사용하여 웹 페이지 내에 큰 텍스트 블록을 표시하거나 숨 깁니다.더 많거나 적은 내용의 큰 텍스트 블록을 토글합니다.

페이지의 끝에있는 작은 텍스트 블록이나 텍스트 블록에서 제대로 작동합니다. 그러나 페이지 내에서 긴 텍스트 블록 (상황)이 발생하면 문제가 발생합니다. "추가"링크를 클릭해도 제대로 작동하지만 펼쳐진 텍스트는 숨기더라도 "적은 링크"를 클릭하면 스크롤 할 수 있습니다. 최대 "더 많은 링크"대신 자신이 페이지 아래로 내려가는 것을 알 수 있습니다. 이것에 대한 해결책이 있는지 궁금한가요? 앵커 토글을 사용하는 것과 같은가요? 나는 현재 내 페이지에서 다음과 같은 작업을하고 있지만 jquery 스킬은 꽤 기본적이고 두 가지를 적용하는 방법을 찾을 수 없다. //은 텍스트를

$('.scrollTo').on('click', function(e) { 
    e.preventDefault(); 
    Foundation.lib_methods.scrollTo($(window), $($(e.currentTarget).attr('href')).offset().top, 200); 
}); 

사이트는 해당하므로, 어떠한 솔루션 zepto뿐만 아니라, JQuery와 호환 할 필요가 재단 4에 내장되어 앵커 스크롤합니다. 에

링크는 페이지에 설정 http://tinyurl.com/o4y42yx

어떤 제안이 가장 감사 여기!

답변

0

core.js 파일 내부에는 다음과 같이 27 라인 24을 대체 : 나는 그것을 테스트하고 처음에 작동하지 않았다

$('.read-more-hide').on('click', function(e) { 
     $('html,body').animate({ 
     scrollTop: $(this).parents('.row').offset().top //scrolls up to the div with class "row" right under the +more link 
     }, 800); 
    $(this).parent('.read-more-content').addClass('hide').parent().children('.read-more-show').removeClass('hide'); 
    return false; 
}); 

, 나중에 내가 모든 스크립트에서 호출하지 않도록 설정하여 그것을 테스트 html 파일 (<script src> 삭제)과 머리에 jquery가 호출되어 작동했습니다. 충돌을 일으키는 원인을 직접 확인하고 싶을 수 있습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

더 많은 시간이 필요하며 현재로서는 검색하고 더 적절한 해결책을 제시 할 필요가 없습니다. 나는 이것이 비록 도움이되기를 바랍니다.

+0

안녕하세요. 빠른 응답을 보내 주셔서 감사합니다. 오랫동안 복용 해 주셔서 감사하지만 지난 주 예기치 않게 퇴장을당했습니다. 제안한 코드를 사용해보십시오. 처음 두 조각은 괜찮 았는데 - 나는 그들을 반영하기 위해 기존 js를 수정 - 그리고 그 id가 실제로 더 많은 것을 읽었을 때 삽입되었는지 확인했다. 하지만 코딩에 삽입하려고 할 때마다 세 번째 스 니펫을 사용할 수 없으므로 토글이 깨져서 모든 텍스트가 표시됩니다. 기본 오류가 발생했는지 궁금하십니까? 내 코드에서 어디에서 세 번째 발췌 문장을 삽입해야하는지, 그리고 내가 이전에 가지고 있던 코드를 대체하거나 추가해야하는지 명확히 할 수 있습니까? 다시 한 번 감사드립니다 –

+0

안녕하세요, 저는 답변을 업데이트했습니다. 또한 core.js의 2-5 행을 테스트 해 보았습니다. – ilias

0

감사합니다. 일리아스, 이것으로 해결해 드리겠습니다. 나는이 문제가 scrollTop을 지원하지 않는 zepto와 같을 것이라고 생각한다. 내가 할 수있는 경우 zepto에 대한 옵션을 내장하고 싶다. 코딩 기술이 마음에 들지는 않는다.

관련 문제