Question

在获取要展开的链接列表时遇到问题只需点击移动设备即可。我目前将它们设置为在移动设备上折叠，并在平板电脑/台式机上展开。在平板电脑/台式机上，链接不应该是可点击的。如何重新启用click事件以在移动设备上切换列表？

  <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

此外，您可以计算屏幕的大小，并在此声明中执行某些操作。因此，如果您要计算像素，可以尝试：

<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

The solution ended up being to place:

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

inside the mobile media query. This allows the sections to go from display:none to visible on click.

仅在移动设备上启用数据切换

2 个答案: