仅在移动设备上启用数据切换 [英] Only enable data-toggle on mobile devices

问题描述

只有在移动设备上点击时，链接列表才能扩展以显示问题.我目前将它们设置为可以在移动设备上折叠，并在平板电脑/台式机上进行扩展.在平板电脑/台式机上时，链接不可单击.如何重新启用点击事件以在移动设备上切换列表?

Having an issue getting the lists of links to expand on click only on mobile. I currently have them set to be collapsed on mobile, and expanded on tablet/desktop. The links should not be clickable when on tablet/desktop. How can I re-enable the click event to toggle the lists on mobile?

  <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/

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

推荐答案

该解决方案最终被放到了这里:

The solution ended up being to place:

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

在移动媒体查询中.这样一来，这些部分就可以从display:none变为点击可见.

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

这篇关于仅在移动设备上启用数据切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！