<!DOCTYPE html>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Score</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.1.0" />

<link rel="stylesheet" href="store/themes/my-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" charset="utf-8" src="store/cordova-1.7.0.js"></script>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

  
  <style type="text/css">
   .accordianMenu{
    font:12px/20px 돋움;
    color: #424242;
    background: #fff;
    padding: 10px;
    width: 500px;
    margin: 0;
   }   
   
   .accordianMenu h1{
    margin: 0;
    font-size: 20px;
    text-shadow: 2px 2px 2px #aeaeae;
   }

   .accordianMenu h2{
    margin: 5px 0;
    padding: 0;
   }
   
   .accordianMenu h2 a{
    font-size: 15px;
    display: block;
    font-weight: normal;
    color: #424242;
    text-shadow: 2px 2px 2px #aeaeae;
    text-decoration: none;
    margin: 0;
    padding: 10px;
    background: #8f8f8f;
    background: -moz-linear-gradient(top, #cecece, #8f8f8f);
    background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
    -webkit-border-radius:5px;   
    -moz-border-radius:5px;
    border-radius:5px;
   }
   
   
   .accordianMenu :target h2 a,
   .accordianMenu h2 a:FOCUS,
   .accordianMenu h2 a:HOVER,
   .accordianMenu h2 a:ACTIVE
   {
    background: #2288dd;
    background: -moz-linear-gradient(top, #6bb2ff,#2288dd);
    background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
   }
   
   
   .accordianMenu p{
    padding: 0 10px;
    margin: 0;
    height: 0;
    overflow: hidden;
    -moz-transition:height 0.5s ease-in;
    -webkit-transition:height 0.5s ease-in;
    -o-transition:height 0.5s ease-in;
    transition:height 0.5s ease-in;
   }
   
   
   .accordianMenu :target p{
    overflow: auto;
    height: 100px;
   }
   
   
   

  </style>
  
 </head>

 <body>
  
 <div data-role="page"  id="match1">
     <div data-role="header">    
   <h2 id="logo">Live Score</h2>
   <a href="#soccer" data-icon="back" data-direction="reverse" class="ui-btn-left">　</a>
        </div>
  <div data-role="navbar"data-theme="a">
      <ul>
       <li><a href="#soccer" class="ui-btn-active" data-icon="grid" >축구</a></li>
       <li><a href="#baseball2" class="ui-btn-active" data-icon="grid">야구</a></li>
        <li><a href="#basket2" class="ui-btn-active" data-icon="grid">농구</a></li>
        <li><a href="#bally2" class="ui-btn-active" data-icon="grid">배구</a></li>
        <li><a href="#hakey2" class="ui-btn-active" data-icon="grid">하키</a></li>
      </ul>
      </div>
        <div data-role="content" data-theme="a">
  <div class="accordianMenu">
   <h1>Live Score</h1>
   <div id="java" class="menuSection">
    <h2><a href="#java">JAVA</a></h2>
    <p>
     java는 java는 java는java는java는java는java는java는java는java는java는

   </p> 
   </div>
   <div id="jsp" class="menuSection">
    <h2><a href="#jsp">JSP</a></h2>
    <p>
     jsp는 jsp는 jsp는 jsp는 jsp는 jsp는 jsp는 jsp는 jsp는 jsp는 jsp는 jsp는   
    </p>
   </div>
   <div id="html5" class="menuSection">
    <h2><a href="#html5">HTML5</a></h2>
    <p>
     HTML5는 HTML5는  HTML5는 HTML5는HTML5는 HTML5는HTML5는

   </p> 
   </div>
   
  </div>

      </div>
   </div>
 </body>
</html>

 

이런 코드를 짯습니다...

문제는요.ㅠ.ㅠㅠㅠㅠㅠ

위에 빨간 부분을 지우면 아코디언이 잘되는데

그부분이 있으면 아코디언이 안되용..ㅠㅠ

돠주세요....ㅠㅠ 아무리 봐도 모르겠어요..ㅠㅠ

 

 

 


 

이 게시물을