리사이즈시 div를 아코디언으로 변환

데스크톱보기에서 서로 옆에 5 개의 div가 있습니다. 그러나 ~ 640px로 크기를 조정하면 이러한 div가 아코디언으로 응축됩니다.리사이즈시 div를 아코디언으로 변환

이 작업을 수행하는 방법에 대한 아이디어 나 요령이 있으십니까?

을 (바탕 화면)

예>

| DIV # 1 | DIV # 2 | DIV # 3 | DIV # 4 |

– – – – – – – – – – –
아코디언 +
– – – – – – –(640에서, 모바일) 5,– – –
DIV 번호 – – – – – –

출처

2014-09-16 user3886632

무엇을 시도해 봤습니까? – Shashank

@Shashank 어디서부터 시작해야할지 모르겠습니다. 나는 html CSS와 아무 JS 경험도 익숙하지 않다 – user3886632

js가 어떻게 해결책을 이해할 것 인 지 경험하는 경우에 ?? js 자습서를 사용하십시오 ... – Shashank

당신은 CSS 미디어 쿼리 alongwith JS 사용할 수 있습니다

HTML

<div class="accordion">+</div> 
<div class="a">A</div> 
<div class="a">B</div> 
<div class="a">C</div> 
<div class="a">D</div> 
<div class="a">E</div>

CSS :

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (max-width : 640px) { 
    /* Styles */ 
    div { 
     display:block; 
     padding:10px; 
     border:1px solid #544454; 
     margin:5px 
    } 
    .a { 
     display:none; 
    } 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 641px) { 
    /* Styles */ 
    .accordion { 
     display:none; 
    } 
    .a { 
     display:inline-block; 
     margin:10px; 
     width:80px; 
     height:40px; 
     border:1px solid green; 
    } 
}

JS :

를3210

$(document).ready(function() { 
    $('.accordion').on('click', function() { 
     $('.a').slideToggle('fast'); 
    }); 
});

데모 : http://jsfiddle.net/lotusgodkk/GCu2D/335/

다시 크기 효과를 볼 수있는 창을여십시오. 필요에 따라 미디어 쿼리 값을 조정하십시오.

출처

2014-09-16 10:02:46

아! 나는 조건부로 가시성에 의한 아코디언의 출현을 촉발시키고 있습니다. 그 아래에 요소를 추가합니다. 훌륭한 솔루션! 엄청 고마워! – user3886632

예. 이 코드는 꽤 설명이 쉽고 쉽습니다.자세한 내용은 미디어 쿼리를 참조하십시오. –

안녕 케이 케이, 빠른 질문을했습니다. 아코디언 JS에서 여러분은 아코디언의 애니메이션이 위쪽과 왼쪽에서부터 확대 된 것처럼 보인다고 설명했습니다. "슬라이드"애니메이션을 적용하여 한 방향으로 만 수직으로 애니메이션을 적용/확대/축소하는 방법이 있습니까? 이 같은 것 : http://jsfiddle.net/B4T2K/ – user3886632

– – – – 1
DIV # 2
DIV # 3
DIV # 4
–이 시도. 창 크기 조정에 listn, 높이가 640 이하가되면 jquery/JS 코드를 작성하여 아코디언으로 변환하십시오.

$(window).on('resize', function() { 
       if(window.innerHeight < 640) 
        //change it to accordion here 
      });

출처

2014-09-16 09:41:08 snehatulsi

리사이즈시 div를 아코디언으로 변환

답변

관련 문제