swiper 플러그인으로 인해 선택 팝업 드롭 다운 상자가 나타납니다.

swiper to slide 페이지를 사용하는 데스크톱 응용 프로그램이 있지만 슬라이드 페이지에 select 태그를 삽입하면 select 태그가 드롭 다운 상자를 팝업 할 수 없습니다. 문제가 생겼어? 감사합니다. 여기 데모는 다음과 같습니다swiper 플러그인으로 인해 선택 팝업 드롭 다운 상자가 나타납니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">  </script> 
<!-- 翻页 依赖jquery --> 
<script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script> 
<title>swiper demo</title> 
<script type="text/javascript"> 
    $(function(){ 
     $('.swiper-container, .swiper-slide').css({ 
      height: ($(window).height()) + 'px', 
      width: '100%' 
     }); 
     var mySwiper = $('.swiper-container').swiper({ 
      //Your options here: 
      mode:'horizontal', 
      loop: false, 
      keyboardControl: true, 
      // mousewheelControl: true, 
      onSlideChangeStart: function(swiper){ 
       pageCurrentNum = swiper.realIndex; 
       $('#currentPage').text(pageCurrentNum + 1); 
       gridster = null; 
       gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster'); 
       if(!confingInfo.isDebug){ 
        gridster.disable(); 
       } 
      }, 
     }); 
    }) 
</script> 

</head> 
<body> 
    <div class="swiper-container responsive"> 
     <div class="swiper-wrapper" style="background:red;"> 
     <!--First Slide--> 
     <div class="swiper-slide "> 
      page1 
      <select> 
       <option>test1</option> 
       <option>test2</option> 
       <option>test3</option> 
      </select> 
     </div> 

      <!--Second Slide--> 
      <div class="swiper-slide"> 
      page2 
      </div> 
     </div> 
    </div> 

    </body> 
</html>

출처

2013-06-08 Dean

내가 코드를 사용하여 문제를 해결 밑줄 :

$('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){ 
      e.stopPropagation(); 
    });

희망이 나 같은 동일한 문제가 발생했습니다 사람을 도울 수 있습니다!

출처

2013-06-09 02:51:44 Dean

공유 해 주셔서 감사합니다. –

정보 주셔서 감사합니다. 너는 내 하루를 보냈다. – suish

누구나 Selectric에서이 기능을 사용해 보셨습니까? – coderade

나는 이것이 오래된 질문이라는 것을 알고있다. 하지만 Swiper 3에서는 Dean의 대답이 작동하지 않습니다.

제 해결책은 SELECT 태그에 class = "swiper-no-swiping"을 추가하는 것입니다.

희망이 도움이됩니다.

출처

2015-09-17 13:33:25

공유 주셔서 감사합니다. 내 저녁을 저장했습니다! – itaynoy

또는 데스크톱에서 터치 이벤트가 필요하지 않은 경우 simulateTouch 옵션을 사용하여 터치 이벤트를 사용 중지 할 수 있습니다.

참조 : http://idangero.us/swiper/api/

출처

2016-05-06 15:24:46

swiper 플러그인으로 인해 선택 팝업 드롭 다운 상자가 나타납니다.

답변

관련 문제