응답 디자인의 행 아래에 div 콘텐츠 표시

Question

현재 8 div가 있으며 count가 증가하거나 감소 할 수 있습니다.이 div 중 각 div에는 콘텐츠를 표시하는 클릭이 포함되어 있습니다. 1024px로 고정되어 있고 위의 작업은 정상적으로 작동합니다. 그러나 문제는이 div가 모두 반응 적이며 해상도가 낮 으면 표시 할 숨겨진 div가 잘못 정렬되어 있습니다. 어느 누구도 나를 똑같이 도울 수 있습니까?

이

내가 쓴 한 HTML의 핵심입니다 : - ,369 당신은 내가 단순히 ID 만 차이가 또 다시 동일한 코드를 반복 한 볼 수 있듯이 same.Also 도움이 코드의 크기를 줄이기위한 1,363,210

 <div class="client-details fl_left" style="display: none;" 
      id="citiCab2"> 
      <span class="pointer" style="left: 73px;"></span> <a 
       class="close-button" href=""></a> 
      <div class="client-container fl_left"> 
       <a href="http://citicabsinc.com/" target="_blank"><img 
        src="images/citicabs-big.png"></a> 
      </div> 
      <div class="client-container fl_right"> 
       <h1>Citi Cabs</h1> 

       <p>The client is a progressive firm, providing eminent car rental 
        services to all kinds for travel requirements. It caters transport 
        and communication to its customers all over India.</p> 

       <p class="title">Client Requirement </p> 

       <p>The client wanted to come up with a website portal, that can be 
        navigated with ease by the visitor who is looking for the car 
        service within Bangalore and anywhere in India.</p> 

       <p class="title">Challenge</p> 

       <p>We the Maganiva Solutions Team had to predominantly understand 
        website workflow making it intuitive for the user to use it with 
        ease keeping in mind the visitor's page. </p> 

       <p class="title">What Maganiva Solutions delivered </p> 

       <p>Maganiva did a complete market study to get insights and came up 
        with a comprehensive model, wherein we not only designed the user 
        friendly website but also provided back-end support to the client 
        in Branding its online presence through SEO.</p> 
      </div> 
     </div> 

자바 스크립트는 마우스 클릭에 호출되는 특정 div.

jQuery(function() { 
    $('#citiCab1').click(function() { 
     $(".client-details").addClass('display-none'); 
     $('#citiCab2').attr('style', function(i, style) { 
      jQuery(this).removeClass('display-none'); 
      return style.replace(/display[^;]+;?/g, ''); 
     }); 
     $("#citiCab2").addClass('display'); 
    }); 



    $('#primus1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#primus2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 

      $("#primus2").addClass('display'); 
     }); 

     $('#MantriEden1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#MantriEden2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#MantriEden2").addClass('display'); 
     }); 

     $('#DilDaruDosti1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#DilDaruDosti2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#DilDaruDosti2").addClass('display'); 
     }); 

     $('#chai1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#chai2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#chai2").addClass('display'); 
     }); 

     $('#mbnt1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#mbnt2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#mbnt2").addClass('display'); 
     }); 

     $('#act1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#act2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#act2").addClass('display'); 
     }); 
     $('#mathru1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#mathru2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#mathru2").addClass('display'); 
     }); 
    }); 

Answer 1

당신이 찾고있는 것을 희망하십시오, 아래 html을보십시오. 희망이 당신을 돕는다! !!

HTML :

<p><a href="JavaScript:toggleMe('desc1');"><strong>Head1</strong></a></p> 
    <div class="desc" id="desc1" style="display: none;"> 
     <h2>Description 1</h2> 
     <p>Content</p> 
     <p><a class="close" href="JavaScript:toggleMe('desc1');">Close</a></p> 
    </div> 
<p><a href="JavaScript:toggleMe('desc2');"><strong>Head2</strong></a></p> 
    <div class="desc" id="desc2" style="display: none;"> 
     <h2>Description 2</h2> 
     <p>Content</p> 
     <p><a class="close" href="JavaScript:toggleMe('desc2');">Close</a></p> 
    </div> 

CSS :

.close{ 
    text-align:right; 
    display:block; 
    padding:10px; 
} 
.desc{ 
    background:#dedede; 
    padding:10px; 
} 

스크립트 :

<script> 
function toggleMe(a) { 
    var e = document.getElementById(a); 
    if (!e) return true; 
    if (e.style.display == "none") { 
     e.style.display = "block" 
    } else { 
     e.style.display = "none" 
    } 
    } 
</script> 

Fiddle Demo