1. 홈
  2. 질의 응답
  3. 위로 슬라이드 할 내용을 얻는 방법

위로 슬라이드 할 내용을 얻는 방법

2014-02-13 5 views
0

클릭 할 때 몇 개의 내용을 표시하기 위해 아래로 슬라이드하는 두 개의 메뉴가 있습니다. 내 문제는 위쪽에있는 옵션을 아래쪽으로 밀어 내고 싶습니다.위로 슬라이드 할 내용을 얻는 방법

메뉴에 대한 나의 코드

<div class="additional-navigation-wrapper"> 
    <div class="additional-navigation"> 
     <a class="border-bottom-white padding-level-one inactive additional-nav-info1" href="javascript:void(0);"> 
      <h4>info</h4> 
      <img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" /> 
      <span class="clearboth"></span> 
     </a> 
     <div class="additional-nav-info-wrapper1"> 
      <div class="additional-nav-info-inner1" style="display: none;"> 
       <ul> 
        <h3>Some information</h3> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique nisi et diam sagittis, scelerisque lacinia justo dictum. Maecenas neque  dolor, sodales vel dolor eget, scelerisque molestie tellus. Aenean ut tristique quam. Nullam id convallis augue. Duis ut sem sed lorem tempor  fermentum eget mattis ligula. Mauris cursus, dolor quis pellentesque porta, lacus ipsum ornare metus, nec volutpat arcu justo id turpis. Nunc  tempus libero non lacus sagittis, nec condimentum nulla fringilla. Duis id ultrices velit. Nunc at sem quis mauris commodo tempor. Phasellus  sit amet est rhoncus ipsum egestas varius quis et quam. Nulla in risus sit amet quam vulputate dapibus et non elit. Cras facilisis congue odio,  sit amet posuere metus eleifend sed. 
        </p> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="additional-navigation-wrapper"> 
     <div class="additional-navigation"> 
      <a class="border-bottom-white padding-level-one inactive additional-nav-info2" href="javascript:void(0);">Lorem ipsum 
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" /> 
       <span class="clearboth"></span> 
      </a> 
      <div class="additional-nav-info-wrapper2"> 
       <div class="additional-nav-info-inner2" style="display: none;"> 
        <ul> 
         Praesent tempor eleifend nibh, nec rutrum est tristique at. Nulla fermentum posuere posuere. Suspendisse potenti. Phasellus dapibus tristique urna, quis eleifend quam dapibus vel. Sed tempor ipsum ipsum, a tristique est tincidunt ac. Curabitur eu erat semper purus lacinia dignissim. Proin pretium hendrerit nisl, vitae ultricies erat adipiscing vitae. Aliquam scelerisque nisl sit amet molestie euismod. 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="additional-navigation"> 
      <a class="border-bottom-white padding-level-one inactive additional-nav-info3" href="javascript:void(0);">Lorem ipsum 
<img class="nav-arrow no-action inactive floatright" src="images/nav-arrow-white.png" /> 
       <span class="clearboth"></span> 
      </a> 
      <div class="additional-nav-info-wrapper3"> 
       <div class="additional-nav-info-inner3" style="display: none;"> 
        <ul> 
         Suspendisse potenti. Nulla facilisi. Curabitur volutpat quam ac pretium varius. Vivamus et commodo sapien. Praesent eu pulvinar neque. Etiam  faucibus sapien sit amet odio adipiscing vestibulum. Aliquam in elit quis augue iaculis dictum id vel lacus. Curabitur vel ligula eget enim imperdiet dapibus id non lacus. Phasellus nec massa quis neque fermentum convallis ac at dolor. Nulla lacus velit, feugiat ut scelerisque sit amet, semper sit amet nibh. Ut auctor justo ligula, ac aliquam massa dictum a. Phasellus sed sapien tincidunt, dignissim turpis vitae, pretium elit. Nulla dictum ac diam id lobortis. 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="additional-navigation"> 
      <a class="border-bottom-white padding-level-one inactive additional-nav-info4" href="javascript:void(0);">Lorem ipsum 
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" /> 
       <span class="clearboth"></span> 
      </a> 
      <div class="additional-nav-info-wrapper4"> 
       <div class="additional-nav-info-inner4" style="display: none;"> 
        <ul> 
         Maecenas sollicitudin et velit nec consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam venenatis elit vel elit  porta, ac pretium arcu commodo. Curabitur nec diam eu eros dignissim vestibulum. Donec tellus justo, aliquet non nunc vel, accumsan gravida  ligula. Mauris eu consequat mi, sed euismod nulla. Vestibulum luctus tempor tortor suscipit ultrices. Vestibulum in justo vel purus tincidunt convallis. Integer varius facilisis urna in scelerisque. Aliquam mattis neque eget arcu blandit, a mollis ligula consectetur. 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="additional-navigation"> 
      <a class="border-bottom-white padding-level-one inactive additional-nav-info5" href="javascript:void(0);">Lorem ipsum 
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" /> 
       <span class="clearboth"></span> 
      </a> 
      <div class="additional-nav-info-wrapper5"> 
       <div class="additional-nav-info-inner5" style="display: none;"> 
        <ul> 
         Aliquam sed tellus eget nunc ultricies pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
         Sed fermentum, ante fermentum faucibus blandit, risus quam tristique justo, a feugiat odio nisl commodo augue. 
         Nulla facilisi. 
         Aenean hendrerit tortor vulputate cursus laoreet. Morbi libero leo, elementum eu lectus nec, fringilla imperdiet purus. Quisque eget odio tempus,  ultricies orci eu, dictum dolor. Curabitur at lectus ac ipsum lobortis consectetur non a tellus. Donec vestibulum sapien et consequat   venenatis. Sed in velit nulla. Nulla commodo, mi at lacinia blandit, tellus dui vestibulum dolor, ac interdum libero arcu a mi. Duis in neque a nulla varius laoreet. Etiam et purus adipiscing, adipiscing est vitae, porttitor nulla. 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="additional-navigation"> 
      <a class="border-bottom-white padding-level-one inactive additional-nav-info6" href="javascript:void(0);">Lorem ipsum 
<img class="nav-arrow no-action floatright" src="images/nav-arrow-white.png" /> 
       <span class="clearboth"></span> 
      </a> 
      <div class="additional-nav-info-wrapper6"> 
       <div class="additional-nav-info-inner6" style="display: none;"> 
        <ul> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ultrices turpis, at ornare tellus. Integer at gravida tellus. Fusce at aliquet sem. Suspendisse condimentum laoreet bibendum. Nam id aliquam arcu. Vivamus vulputate purus vitae ipsum elementum, vitae feugiat risus pellentesque. Nam vel turpis dolor. Phasellus turpis lacus, facilisis ac lectus sed, imperdiet tempor sem. Duis sed tortor ac urna ultrices sagittis id vitae dolor. Duis mattis venenatis dui sit amet luctus. Fusce eu felis sed dui blandit volutpat. Nullam pharetra pellentesque quam ut laoreet. 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="additional-navigation"> 
      <a class="border-bottom-white padding-level-one active contact-details-onpage" href="javascript:void(0);">Lorem ipsum 
<img class="nav-arrow no-action floatright" src="images/nav-arrow-blue-one.png" /> 
       <span class="clearboth"></span> 
      </a> 
      <div class="contact-details-onpage-wrapper"> 
       <div class="contact-details-onpage-inner" style="display: block;"> 
        <ul> 
         <li> 
          <a href="#">EMAIL US 
<img src="images/email-ico.png" /> 
           <img style="display: none;" src="images/email-ico-active.png" /> 
          </a> 
         </li> 
         <li> 
          <a href="#">08000 58 24 50 
<img src="images/telephone-ico.png" /> 
           <img style="display: none;" src="images/telephone-ico-active.png" /> 
          </a> 
         </li> 
         <li> 
          <a href="#">OUR PORTFOLIO 
<img src="images/portfolio-ico.png" /> 
           <img style="display: none;" src="images/portfolio-ico-active.png" /> 
          </a> 
         </li> 
         <li> 

          <a href="#">CONTACT FORM 
<img src="images/contact-form-ico.png" /> 
           <img style="display: none;" src="images/contact-form-ico-active.png" /> 
          </a> 
         </li> 
         <div class="clearboth"></div> 
        </ul> 
        <div class="clearboth"></div> 
       </div> 
      </div> 
     </div> 
    </div>

이 여기에 내 CSS를

html, body { 
    background: #FFFFFF; 
    font-family: arial; 
    font-size: 18px; 
    margin: 0; 
    padding: 0; 
    color: #000000; 
} 

.border-bottom-blue { 
    border-bottom: solid 1px #43b6cf; 
} 

.padding-level-one { 
    padding: 0 22px; 
} 

.additional-navigation-wrapper { 
} 

.additional-navigation .nav-arrow { 
    padding: 0; 
} 

.additional-navigation-wrapper a { 
    color: #000; 
    padding: 10px 22px; 
    text-transform: uppercase; 
    text-decoration: none; 
    display: block; 
} 

.additional-navigation .active { 
    color: #43b6cf; 
    border-bottom: solid 1px #43b6cf; 
} 

.csstransitions .additional-navigation-wrapper a { 
    -webkit-transition-duration: 0.5s; 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    transition-duration: 0.5s; 
} 

.additional-navigation-wrapper a:hover { 
    color: #43b6cf; 
    border-bottom: solid 1px #43b6cf; 
} 

.contact-details-onpage-inner { 
    padding: 40px 22px 2px; 
} 

    .contact-details-onpage-inner ul { 
     font-size: 12px; 
    } 

    .contact-details-onpage-inner li { 
     float: left; 
     position: relative; 
     list-style: none; 
     height: 23px; 
     margin: 0 40px 0 0; 
    } 

     .contact-details-onpage-inner li img { 
      position: absolute; 
      left: 0; 
      top: 0; 
     } 

     .contact-details-onpage-inner li a { 
      color: #ffffff; 
      text-decoration: none; 
      position: relative; 
      padding: 10px 5px 2px 30px; 
     } 

      .contact-details-onpage-inner li a:hover { 
       border: none; 
       color: #ffffff; 
      }

이며, 여기에 내 JQuery와

$(".additional-nav-info0").click(function() { 
    if ($(".additional-nav-info-inner0").css("display") == "block") { 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner0").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner0").stop().slideToggle(250); 
    } 
}); 

$(".additional-nav-info-inner0 a").hover(function() { 
    $(this).find("img").eq(0).fadeOut(250); 
    $(this).find("img").eq(1).fadeIn(250); 
}, function() { 
    $(this).find("img").eq(0).fadeIn(250); 
    $(this).find("img").eq(1).fadeOut(250); 
}); 

$(".additional-nav-info1").click(function() { 
    if ($(".additional-nav-info-inner1").css("display") == "block") { 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner1").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner1").stop().slideToggle(250); 
    } 
}); 

$(".additional-nav-info-inner1 a").hover(function() { 
    $(this).find("img").eq(0).fadeOut(250); 
    $(this).find("img").eq(1).fadeIn(250); 
}, function() { 
    $(this).find("img").eq(0).fadeIn(250); 
    $(this).find("img").eq(1).fadeOut(250); 
}); 

$(".additional-nav-info2").click(function() { 
    if ($(".additional-nav-info-inner2").css("display") == "block") { 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner2").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner2").stop().slideToggle(250); 
    } 
}); 

$(".additional-nav-info-inner2 a").hover(function() { 
    $(this).find("img").eq(0).fadeOut(250); 
    $(this).find("img").eq(1).fadeIn(250); 
}, function() { 
    $(this).find("img").eq(0).fadeIn(250); 
    $(this).find("img").eq(1).fadeOut(250); 
}); 

$(".additional-nav-info3").click(function() { 
    if ($(".additional-nav-info-inner3").css("display") == "block") { 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner3").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner3").stop().slideToggle(250); 
    } 
}); 

$(".additional-nav-info-inner3 a").hover(function() { 
    $(this).find("img").eq(0).fadeOut(250); 
    $(this).find("img").eq(1).fadeIn(250); 
}, function() { 
    $(this).find("img").eq(0).fadeIn(250); 
    $(this).find("img").eq(1).fadeOut(250); 
}); 

$(".additional-nav-info4").click(function() { 
    if ($(".additional-nav-info-inner4").css("display") == "block") { 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner4").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner4").stop().slideToggle(250); 
    } 
}); 

$(".additional-nav-info-inner4 a").hover(function() { 
    $(this).find("img").eq(0).fadeOut(250); 
    $(this).find("img").eq(1).fadeIn(250); 
}, function() { 
    $(this).find("img").eq(0).fadeIn(250); 
    $(this).find("img").eq(1).fadeOut(250); 
}); 

$(".additional-nav-info5").click(function() { 
    if ($(".additional-nav-info-inner5").css("display") == "block") { 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner5").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner5").stop().slideToggle(250); 
    } 
}); 

$(".additional-nav-info-inner5 a").hover(function() { 
    $(this).find("img").eq(0).fadeOut(250); 
    $(this).find("img").eq(1).fadeIn(250); 
}, function() { 
    $(this).find("img").eq(0).fadeIn(250); 
    $(this).find("img").eq(1).fadeOut(250); 
}); 

$(".additional-nav-info6").click(function() { 
    if ($(".additional-nav-info-inner6").css("display") == "block") { 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner6").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner6").stop().slideToggle(250); 
    } 
});

입니다 http://jsfiddle.net/cerberus478/58Jm7/1/

JSFiddle 에 대한 링크입니다

출처

2014-02-13 user3095193

+0

대신 down' –

+0

"정보"나는 의미 사람이었다라고 한 위로 밀어하는 당신은 상단에있는 옵션'에 의해 무슨 뜻 이죠 미안 – user3095193

+0

확실하지 않은 것 당신은 원하지만 현재 스크립트는 http://jsfiddle.net/arunpjohny/qtrpE/1/ –

답변

0 
.slideToggle({direction: 'up'}, 250);

출처

2014-02-13 13:11:12 CRABOLO

+0

나는 그걸 시도했는데 그건 작동하지 않았다. – user3095193

0 
<script type="text/javascript"> 
$(".additional-nav-info1").click(function(){ 
      if($(".additional-nav-info-inner1").css("display") == "block"){ 
       $(this).removeClass("active"); 
       $(this).addClass("inactive"); 
       $(".additional-nav-info-inner1").stop().slideToggle(250); 
      } else { 
       $(this).removeClass("inactive"); 
       $(this).addClass("active"); 
       $(".additional-nav-info-inner1").stop().slideToggle({direction: 'up'}, 250); 
      } 
     });   
</script>

지금, 당신은 단지 위치를 추가해야합니다 : 절대; .additional-nav-info1.

출처

2014-02-13 13:14:39 Netzach

+0

나는 그걸 시도했으나 작동하지 않았다. – user3095193

+0

정말 슬라이드를 사용해야합니까? 당신은 아코디언을 사용할 수 있습니다. http://jqueryui.com/accordion/ – Netzach

+0

저는 아코디언 사용에 신경 쓰지 않겠습니다. 클릭 할 수있는 몇 가지 옵션이 있습니다. 정보 및 lorem ipsum입니다. lorem ipsum의 콘텐츠가 다운되는 동안 정보의 콘텐츠가 올라가고 싶습니다. – user3095193

0 
$(".additional-nav-info1").click(function(){ 
    if($(".additional-nav-info-inner1").css("display") == "block"){ 
     $(this).removeClass("active"); 
     $(this).addClass("inactive"); 
     $(".additional-nav-info-inner1").stop().slideToggle(250); 
    } else { 
     $(this).removeClass("inactive"); 
     $(this).addClass("active"); 
     $(".additional-nav-info-inner1").stop().slideToggle(250); 
     var dHeight = $(".additional-nav-info-inner1 ul").height(); 
     $('html,body').animate({ scrollTop: '+=' + dHeight + 'px' }, 250); 
    } 
});

fiddle

출처

2014-02-13 15:41:38 maco

관련 문제

 관련 문제