드롭 다운 목록의 스크롤 막대

현재 jquery, CSS 드롭 다운을 시도했습니다. 여기에서부터입니다. 드롭 다운 목록의 스크롤 막대

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

내가 너무 많은 목록을 추가했다. 하지만 스크롤바가 나오지 않고 목록이 너무 길다. 코드는 다음과 같습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Reinventing drop down with CSS and jQuery - demo</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
     body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;} 
     .desc { color:#6b6b6b;} 
     .desc a {color:#0092dd;} 

     .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; } 
     .dropdown dd { position:relative; } 
     .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;} 
     .dropdown a:hover { color:#5d4617;} 
     .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;} 
     .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px; 
         border:1px solid #d4ca9a; width:150px;} 
     .dropdown dt a span {cursor:pointer; display:block; padding:5px;} 
     .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none; 
          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;} 
     .dropdown span.value { display:none;} 
     .dropdown dd ul li a { padding:5px; display:block;} 
     .dropdown dd ul li a:hover { background-color:#d0c9af;} 

     .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; } 
     .flagvisibility { display:none;} 


    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".dropdown img.flag").addClass("flagvisibility"); 

      $(".dropdown dt a").click(function() { 
       $(".dropdown dd ul").toggle(); 
      }); 

      $(".dropdown dd ul li a").click(function() { 
       var text = $(this).html(); 
       $(".dropdown dt a span").html(text); 
       $(".dropdown dd ul").hide(); 
       $("#result").html("Selected value is: " + getSelectedValue("sample")); 
      }); 

      function getSelectedValue(id) { 
       return $("#" + id).find("dt a span.value").html(); 
      } 

      $(document).bind('click', function(e) { 
       var $clicked = $(e.target); 
       if (! $clicked.parents().hasClass("dropdown")) 
        $(".dropdown dd ul").hide(); 
      }); 


      $("#flagSwitcher").click(function() { 
       $(".dropdown img.flag").toggleClass("flagvisibility"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <h1>JankoAtWarpSpeed demos</h1> 
    <h3>Demo for tutorial: <a href="http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx">Reinventing drop down with CSS and jQuery</a></h3> 
    <p class="desc">The control down here is a dropdown made with CSS and jQuery. <strong>Optionally, you can <a href="#" id="flagSwitcher">toggle flags</a> and see the full power of this reinvented element.</strong></p> 
    <dl id="sample" class="dropdown"> 
     <dt><a href="#"><span>Please select the country</span></a></dt> 
     <dd> 
      <ul> 
       <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li> 
       <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li> 
       <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li> 
       <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li> 
       <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li> 
       <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li> 
       <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li> 
       <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li> 
           <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li> 
       <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li> 
       <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li> 
       <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li> 
       <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li> 
       <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li> 
       <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li> 
       <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li> 
           <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li> 
       <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li> 
       <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li> 
       <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li> 
       <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li> 
       <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li> 
       <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li> 
       <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li> 
           <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li> 
       <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li> 
       <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li> 
       <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li> 
       <li><a href="#">Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></a></li> 
       <li><a href="#">Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></a></li> 
       <li><a href="#">United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></a></li> 
       <li><a href="#">United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></a></li> 
      </ul> 
     </dd> 
    </dl> 
    <span id="result"></span> 
</body> 
</html>

친절하게 도와주세요. 감사.

출처

2010-01-29 spotlightsnap

전체 스타일을 붙여 넣었습니다. 변경할 필요가있는 것은 ".dropdown dd ul"클래스 선택기입니다. 다음 두 속성이 추가되어야합니다.

height: 100px; /* change to suit your needs */ 
overflow: auto;

아래에 붙여 넣은 것처럼 끝에 추가하십시오.

<style type="text/css"> 
     body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;} 
     .desc { color:#6b6b6b;} 
     .desc a {color:#0092dd;} 

     .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; } 
     .dropdown dd { position:relative; } 
     .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;} 
     .dropdown a:hover { color:#5d4617;} 
     .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;} 
     .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px; 
         border:1px solid #d4ca9a; width:150px;} 
     .dropdown dt a span {cursor:pointer; display:block; padding:5px;} 
     .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none; 
          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none; height:100px; overflow: auto;} 
     .dropdown span.value { display:none;} 
     .dropdown dd ul li a { padding:5px; display:block;} 
     .dropdown dd ul li a:hover { background-color:#d0c9af;} 

     .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; } 
     .flagvisibility { display:none;} 


    </style>

출처

2010-01-29 04:42:44

대단히 감사합니다. – spotlightsnap

@spotlightsnap : 다이너 마이트, 그게 효과가 있다면, 대답 해주세요 :) –

드롭 다운 목록의 스크롤 막대

답변

관련 문제