的JavaScript：

Question

当鼠标移动到社交网络的按钮上时，我在悬停模式下使用弹出窗口。这在浏览器中运行良好，但希望在移动设备中禁用，或者更准确地说，在不使用鼠标的设备上禁用。

        <div class="collapse navbar-collapse navbar-ex2-collapse">
            <ul class="nav navbar-nav textomenu">
                <li><div id="example" data-trigger="hover" data-content="Comparte esta página!" data-original-title="Amixer Music" class="fb-like botonlike" data-href="http://www.traductoramixer.es/amixermusic/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
                <li><div id="example2" data-trigger="hover" data-content="Unete a nosotros!" data-original-title="Traductor Amixer" class="fb-like botonlike" data-href="https://www.facebook.com/traductoramixer.es" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
                <li><div id="example3" data-trigger="hover" data-content="Sigueme!" data-original-title="Kokox - Webmaster" class="fb-follow botoncomparte" data-href="http://www.facebook.com/elkokox" data-colorscheme="light" data-layout="button_count" data-show-faces="false"></div></li>
            </ul>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      <script>
          $(function (){
             $("#example").popover({

                placement: 'bottom'
             });

          });

          $(function (){
             $("#example2").popover();
          });

          $(function (){
             $("#example3").popover({
                placement: 'top'
             });
          });
      </script>

我已经做出了这个决定，因为在小屏幕上，popover留有余量，我认为他的使用（悬停模式）对于不使用鼠标的设备是不必要的。

提前致谢。

Answer 1

请参阅this answer。

您可以使用Modernizr检测设备是否为触摸设备，并根据它激活或不激活popover

的JavaScript：

if (Modernizr.touch) {
   // activate popover
}

Bootstrap3 - 在移动设备上禁用Popover

1 个答案:

的JavaScript：