Question

我是jQuery的新手，我想知道如何使用平板电脑和桌面视口大小禁用引导按钮。我知道如何禁用按钮，但是我只想在屏幕尺寸为平板电脑和台式机时禁用。

JS：

$(window).resize(function() {
  if($(window).width()<768)
  {
    $('#sec-nav').click(function() {
      $("#sec-nav *").attr("disabled", "disabled").off('click');
    });
  }
});

或者我尝试过

     $(function(){
    setSizeAlerts();
    $(window).resize(function(){
        setSizeAlerts();
    });
   });



     function setSizeAlerts(){
      $('#sec-nav [data-toggle="collapse"]').click(function(e){
   if ($(window).width() <= 768) { 
    e.preventDefault();
    e.stopPropagation();
  }  


if ($(window).width() < 768) { 
    return false;

    }
     })
  };

但是当我说返回小于768的false时并没有启用它

HTML

            <div class="quickLinks col-sm-4 col-md-3">
                   <nav class="navbar secondary-nav" 
                    role="navigation">
                <div class="container-fluid">


                <div class="nav navbar-nav" id="sec-nav">
           <button type="button" class="navbar-toggle2 collapsed" 
              data-toggle="collapse" data-target="#secondary-nav" 
                  aria-expanded="false">

              <span class="Quicklinks"><p>Quick Links</p></span> <i 
                    class="fas fa-chevron-right quickChevron"></i>
            </button>
            </div>

          <div class="collapse navbar-collapse" id="secondary-nav">
          <ul class="nav navbar-nav boxin">
         <li role= "presentation" class="dropdown">
             <div class="dropdown">

            <button class="dropdown-toggle" type="button" 
                id="dropdownMenu1" data-toggle="dropdown" aria- 
                 haspopup="true" aria-expanded="true"> 
                HP ProDesk 400 G3
             <i class="fas fa-chevron-right chevright"></i>
            </button>
             <ul class="dropdown-menu" aria- 
               labelledby="dropdownMenu1">
            <li><a href="#">System Drive replacement </a></li>
            <li><a href="#">Content Drive replacement </a></li>
             </ul>
             </div>
          <li>
         <ul>
         </div

我知道了！！！

    $(function(){
    setSizeAlerts();
    $(window).resize(function(){
        setSizeAlerts();
    });
    });



      function setSizeAlerts(){
      $('#sec-nav [data-toggle="collapse"]').click(function(e){
    if ($(window).width() > 768) { 
    e.preventDefault();
    e.stopPropagation();
    }  


     if ($(window).width() >= 768) { 
    return false;

     }
        })
           };

是向后的箭头变大还是变小

Answer 1

您需要使用以下点击事件来防止切换事件

$('#sec-nav [data-toggle="collapse"]').click(function(e){
      if ($(window).width() >= 768) { 
        e.preventDefault();
        e.stopPropagation();
      }    
});

要切换使用的禁用状态，请执行以下操作：

$(window).resize(function() {
  if ($(window).width() >= 768) {
        $("#sec-nav *").prop("disabled", true);
      } else {
        $("#sec-nav *").prop("disabled", false); //re-enable the disabled button
      }
});

Answer 2

有两种不同的方法可以做到这一点。 1）使用javascript检测浏览器

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 $('#sec-nav').click(function(){
         $("#sec-nav *").attr("disabled", "disabled").off('click');
        });
}

2）我找到了一个使用DisplayMetrics()检测客户端屏幕尺寸的函数：

DisplayMetrics metrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);

float yInches= metrics.heightPixels/metrics.ydpi;
float xInches= metrics.widthPixels/metrics.xdpi;
double diagonalInches = Math.sqrt(xInches*xInches + yInches*yInches);
if (diagonalInches>=6.5){
    // 6.5inch device or bigger
}else{
    // smaller device
}

在使用jquery窗口或视口大小时，如何使用引导程序禁用按钮？

2 个答案: