Sadece mobil cihazlarda veri geçişini etkinleştirin

Question

Yalnızca mobil cihazlarda tıklatmak için bağlantı listelerini almakla ilgili bir sorun yaşıyorum. Şu anda mobil cihazlarda daraltılmaya ve tablet/masaüstüne genişletilmeye hazırlandım. Tablet/masaüstü bilgisayarlarda bağlantılar tıklanabilir olmamalıdır. Listeleri mobil cihazlarda değiştirmek için tıklama etkinliğini nasıl yeniden etkinleştirebilirim?

<div class="row"> 
    <div class="col-lg-12"> 
    <div class="footer-links"> 
     <div class="row"> 
     <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#about"> 
      <h4 class="panel-title"> 
      <a class="accordion-toggle"> 
      <i class="material-icons">&#xE145;</i> 
      Link Head 
      </a> 
     </h4> 
      <ul class="visible-sm visible-md visible-lg collapse" id="about"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#why"> 
      <h4 class="panel-title"> 
      <a class="accordion-toggle"> 
      <i class="material-icons">&#xE145;</i> 
      Link Head 
      </a> 
     </h4> 
      <ul class="visible-sm visible-md visible-lg collapse" id="why"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#quicklinks"> 
      <h4 class="panel-title"> 
      <a class="accordion-toggle"> 
      <i class="material-icons">&#xE145;</i> 
      Link Head 
      </a> 
     </h4> 
      <ul class="visible-sm visible-md visible-lg collapse" id="quicklinks"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-8"> 
      <h4 class="deal-text"><strong>A bit of ad text</strong>will go here</h4> 
     </div> 
     <div class="col-md-3 col-sm-4"> 
      <div class="footer-share"> 
      <a href=""><img src="/img/facebook_icon.png"></a> 
      <a href=""><img src="/img/twitter_icon.png"></a> 
      <a href=""><img src="/img/linkedin_icon.png"></a> 
      <a href=""><img src="/img/youtube_icon.png"></a> 
      <a href=""><img src="/img/google_icon.png"></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

jQuery

$('[data-toggle="collapse"]').click(function(e) { 
    if ($(window).width() >= '321') { 
    e.stopPropagation(); 

    } else if ($(window).width() <= '320') { 
    $('.panel').on('click', function() { 
     $('.collapse').collapse('hide'); 
    }); 
    } 
}); 

JSFIDDLE: https://jsfiddle.net/mxv9yq4m/11/

Answer 1

Ayrıca ekranın boyutunu hesaplamak ve bu ifadeye de bir şeyler yapabiliriz. Pikselleri hesaplasanız Yani, deneyebilirsin:

<script type="text/javascript"> 
//Call the mobile_collapse() function in your DOM 

    $(function(){ 
    mobile_collapse() 
); 

    function mobile_collapse() { 
     //NOTE: THE UNIVERSAL DIMENSION FOR CALCULATE MOBILE SCREEN IS 768PX IN MEDIA QUERY LIKE CSS 
     var mediaquery = window.matchMedia("(max-width: 768px)"); 
     //Here, if the screen is <= 768px, you will show the collapse because we are in a mobile device. 
     if (mediaquery.matches) { 
     //we will show the colapse 
      $('.collapse').hide('show'); 
     } 
     //If this is not, you will: 
     else { 
      //we hide the colapse if the size is up to 768px, like a tablet or desktop because is not a mobile device 
      $('.collapse').collapse('hide'); 
     } 
    } 
</script> 

Answer 2

çözüm yerleştirmek için olmak sona erdi: mobil medya sorgusu içinde

.collapse.in{ 
    display:block!important; 
} 

. Bu, bölümlerin display:none'dan tıklamada görünmesine izin verir.