다른 요소를 클릭 할 때 트리거 선택 상자가 드롭됩니다.

선택 입력에서 '바꾸기'를 시도하고 있습니다. jquery에서 선택 교체 플러그인을 살펴 봤지만 모두 약간 부풀린 IMO입니다. 내가 달성하고 싶은 것은 선택 박스의 드롭 다운 버튼 위에 위치하는 단순한 스팬이며, 클릭하면 선택 옵션들이 드롭됩니다. 다른 요소를 클릭 할 때 트리거 선택 상자가 드롭됩니다.

전혀이 가능 ...

$(document).ready(function(){ 

$('select').after('<span class="cta arrow-down"></span>'); 
$('input[type="submit"]').after('<span class="cta arrow-right"></span>'); 

$('span.cta').each(function(){ 
    var $this = $(this); 
    var $prev = $this.prev(); 
    var $dim = $prev.position(); 
    $this.css({'top':$dim.top, 'right':0, 'height':$prev.outerHeight(), 'width':$prev.outerHeight()}); 
    $this.click(function(){ 
    $prev.trigger('click'); 
    }); 
}); 

});

내가 클릭하고 triggerHandler는 관련 FUNC하지만 아무 소용에 전화로 mousedown도 mousedown을 시도하고있다 : 여기

내가 가진 무엇인가?

출처

2010-07-14 Ian Wood

IE를 사용하면 모든 사람이 재미를 잃어 버리게되어 크로스 브라우저 방식으로는 실제로이 작업을 수행 할 수 없습니다. 초기 버전의 IE에서 <select>은 Windows Forms에서 직접 가져온 컨트롤이므로 (z-index 및 스타일 문제가 있음) IE가 안정적으로이를 수행 할 수 없기 때문에 많은 것들이 표준화되거나 지원되지 않습니다.

<select> 대체 경로를 따라 가야 할 일을하기 위해서 부풀어 오르지 않겠지 만 ... IE가 그 플러그인의 주된 이유이기도합니다.

출처

2010-08-31 00:45:45

나는 여기서 OP와 같은 질문을하고 있는데, 사람들이 듣지 못한다는 말을 듣고 아프다.

세계에서 가장 유명한 웹 사이트 중 하나 인 완벽한 예가 페이스 북입니다.

등록 페이지 (로그인하지 않은 경우 색인 페이지)에는 생년월일, 출생 월, 출생 연도 및 성별 드롭 다운 상자가 있습니다.

드롭 다운 상자를 div으로 바꾸어 '스푸핑'하는 모든 예를 보았습니다.하지만 여기서는 사용하지 않습니다. 적어도 전적으로. 드롭 다운 상자는 완전히 크로스 브라우저이며 모든 플랫폼에서 동일하게 보입니다.

여기가 사업부 아니다 있다는 증거,이 IE8은 윈도우 7에 :

http://users.on.net/mbywaters/fb.jpg

없음 HTML 요소는 같은 브라우저의 뷰포트 외부에 표시 할 수 있습니다.

분명히 CSS의 일부 요소가 있습니다. 크롬에서는 선택 상자를 채우고 테두리를 제공 할 수 있습니다. 이것은 IE 작동하지 않습니다, 그래서 그들은 단지 IE 존재 박스 주변 사업부를 제공하고 있습니다 : 자신을이 양식

http://users.on.net/mbywaters/fb2.jpg

재생하고 당신은 행동이 아래 실제 드롭으로 정확하게하다고 볼 수 있습니다 상자가 작동해야합니다.

숨겨진 선택 요소의 드롭 다운 목록을 호출하는 JavaScript 코드가 있어야한다는 사실을 저 자신이 사퇴했습니다. 나는 페이스 북의 자바 스크립트를 훑어 볼 시간이 없지만 절대적으로 방법이 있어야한다.

편집 :

내 반응이 조금시기 상조 인 것 같습니다.이 크롬에 표시됩니다으로

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE8은 완벽하게 패딩을 표시 :이 일을하려고 때

, 나는 IE8은 내가 포함했다 잊었이 작은 아름다움 IE7을 모방했다. 그래서 페이스 북은 어떤 일도 까다 롭지 않다.

그래서 IE7이 문제라고 생각합니다. 그럼에도 불구하고 IE7, IE8, Chrome 및 Firefox 3.6.15 (테스트 한 유일한 솔루션)에 적합한 솔루션을 만들었습니다.

<!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" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.8.10.custom.min.js"></script> 
    <style type="text/css"> 
     .hidden{ 
     padding:5px; 
     display:inline; 
     border:1px solid #888888; 
     font-family:Verdana; 
     font-size:10pt; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('.hidden').focus(function(){ 
      $(this).css('border', '1px solid #73a6fd'); 
     }).blur(function(){ 
      $(this).css('border', '1px solid #888888'); 
     }); 
     }); 
    </script> 
    <!--[if IE 7]> 
    <style type="text/css"> 

     .regselectdiv{ 
     position:relative; 
     display:inline; 
     padding:5px; 
     padding-left:6px; 
     border:0px; 
     border:1px solid #888888; 
     float:left; 
     margin-right:7px; 
     } 

     .selectwrap{ 
     position:relative; 
     border:0px; 
     overflow:hidden; 
     } 

     .arrow{ 
     position:absolute; 
     width:15px; 
     height:16px; 
     background:url('arrow.png'); 
     margin-left:-17px; 
     border:1px solid #707070; 
     } 

     .border{ 
     display:none; 
     position:absolute; 
     width:15px; 
     height:16px; 
     border:1px solid #3c7fb1; 
     background:none; 
     margin-left:-17px; 
     } 

     .selectwrap:hover .arrow{ 
     visibility:hidden; 
     } 

     .selectwrap:hover .border{ 
     display:inline; 
     } 

     .hidden{ 
     margin-top:-2px; 
     margin-left:-2px; 
     line-height:5px; 
     padding:0px; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

     $('.hidden').wrap('<div class="regselectdiv"><div class="selectwrap">'); 

     $('.border, .selectwrap').live('mouseleave', function(){ 
      $('.arrow').show(); 
     }); 

     $('.hidden').focus(function(){ 
      $(this).parent().parent().css('border', '1px solid #73a6fd'); 
     }).blur(function(){ 
      $(this).parent().parent().css('border', '1px solid #888888'); 
     }); 

     $('.selectwrap').each(function() { 
      wrapper($(this)); 
     }); 

     function wrapper(x) { 
      var arrow = "<div class='border'></div><div class='arrow'></div>"; 
      x.append(arrow); 
      var height = x.find('select').height(); 
      var width = x.find('select').width(); 
      x.width(width+2); 
      x.height(height); 
     } 
     }); 
    </script> 
    <![endif]--> 

    </head> 
    <body> 
    <select class='hidden'> 
     <option>Month:</option> 
     <option>Jan</option> 
    </select> 
    <select class='hidden'> 
     <option>Day:</option> 
     <option>1</option> 
    </select> 
    <select class='hidden'> 
     <option>Year:</option> 
     <option>2011</option> 
    </select> 
    </body> 
</html>

여기 http://users.on.net/mbywaters/arrow.png

코드이다 : 여기

는 이미지

출처

2011-03-18 00:03:23 Michael

다른 요소를 클릭 할 때 트리거 선택 상자가 드롭됩니다.

답변

관련 문제