Question

我正在使用bootstrap popover作为drop down菜单。有没有办法可以在页面调整大小时使用popover或css media queries禁用jquery功能，并在移动视图中使菜单可见且垂直。

以下是我尝试的内容：

<a href="#"  id="ble" class="ved" data-placement="bottom" data-toggle="popover" data-content='
<ul class="nav nav-pill">
<li><a href="#" >home</a></li>
 <li><a href="#" >home</a></li>
 </ul>
 '>Toggle popover</a>
</div>
 <script>
 $(document).ready(function(){
$('#ble').popover({html:true}); 
$(window).on('resize', function () {
if ($window.width() > 300) {
   $('#ble').unbind('popover');
 }
  });
     });

Answer 1

如果您使用CSS进行媒体查询，会更容易。

@media (max-width: 300px) {
   #ble {display: none;}
}

Answer 2

使用matchMedia - 上面的IE10支持。

if (window.matchMedia("(min-width: 400px)").matches) {
   $('#element').popover('hide'); // Hides popover
   $('#element').popover('destroy') //Destroys 
} else {
  activate the popup here
}

将https://github.com/paulirish/matchMedia.js/用于matchMedia polyfill

如何在页面调整大小时使引导弹出窗口无效

2 个答案: