Jquery 클릭하여 콘텐츠 슬라이드보기

나는 magento에서 일하고 있습니다. 내 작업이 슬라이드를 구현해야합니다.Jquery 클릭하여 콘텐츠 슬라이드보기

하나의 컨테이너에 여러 항목이 있습니다. 각 항목에는 다른 내용이 있습니다. 이 콘텐츠에는 텍스트, 이미지 (슬라이더가 필요할 수도 있음)가 있습니다. 정상적인 모든 콘텐츠는 숨겨져 있습니다. 사용자가 항목 중 하나를 클릭 할 때. 이 콘텐츠가 표시로 변경되었습니다. 이 항목을 다시 클릭하면이 내용을 다시 숨겨야합니다. 사례 사용자가 다른 콘텐츠를 클릭하면 이전 콘텐츠가 숨겨져 있고 새 콘텐츠가 표시되어야합니다.

누구나 해결책을 찾을 수 있습니다. 덕분에 모든

링크 페이스트 빈 아래

HTML 마크 업 설명 내가 부트 스트랩 최신 버전에서 작동

http://pastebin.com/raw.php?i=VVDsX6d0 P/S 여기

출처

2014-10-21 mrtuvn

, 그러나 당신은 이것이 당신이 찾고 있었고 매우 매끄럽게하는 것을 알게 될 것입니다.

HTML

<div class="field"> 
    <a href="#" key="1">Content 1</a> 
    <div id="toggleMe1" class="toggleMe">Some content</div> 
</div> 
<div class="field"> 
    <a href="#" key="2">Content 2</a> 
    <div id="toggleMe2" class="toggleMe">Some more but different content</div> 
</div> 
<div class="field"> 
    <a href="#" key="3">Content 3</a> 
    <div id="toggleMe3" class="toggleMe">and yet some more content</div> 
</div>

JQuery와

$(document).ready(function(){ 
    $("a").on("click", function(){ 
     var dkey = $(this).attr("key"); 
     $(".toggleMe").each(function(){ 
      var opener = "toggleMe"+ dkey; 
      if($(this).attr("id") == opener){ 
       $(this).slideDown(500); 
      }else{ 
       $(this).slideUp(500); 
      } 
     }); 
    }); 
});

CSS

.toggleMe{ 
    height:100px; 
    width:100px; 
    background:#e7e7e7; 
    display:none; 
} 
.field{ 
    display:block; 
} 
a{ 
    background:#e7e7e7; 
    color:#000; 
    border:1px solid #000; 
    padding:1px 8px; 
    line-height:10px; 
}

당신은 Here

임 당신이 내가했고, 호 무엇을 볼 수있는 행동에 그것을 볼 수 있습니다 w를 사용하여 ID 및 클래스를 사용하여 전송하십시오.

희망이 도움이되었습니다.

출처

2014-10-21 05:26:34 Parody

이

HTML 코드를 시도 :

<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
    </div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div>

jQuery를 코드 :

$(function() { 
$('.office-title').click(function() { 
    $(this).next('div').slideToggle(); 

    $(this).parent().siblings().children().next().slideUp(); 
    return false; 
});});

CSS 코드 :

.office{display: none;}

확인이 링크 : 당신의 링크를 보았고, 그렇게 내가 몇 가지 일반적인 ID와 클래스를 사용까지 모의 필요하지 초과 코드를 많이했다 demo

출처

2014-10-21 04:29:59 PraveenKumar

Jquery 클릭하여 콘텐츠 슬라이드보기

답변

관련 문제