Question

我有这个嵌套的Bootstrap侧边栏菜单，它在计算机上查看时非常有效。但在平板电脑和移动设备上，它根本不会崩溃。字形图也未显示。我添加了一个Bootply来更好地缩短代码：http://www.bootply.com/Shptsc0Bx8#

我想知道jQuery是否有问题？

这是我的HTML：

<div class="panel-group" id="accordion">

<div class="panel panel-default">
   <div class="panel-heading">
      <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
         Main
         </a>
      </h4>
   </div><!--/.panel-heading -->
   <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">

                                <div class="panel-group" id="nested">

                         <div class="panel panel-default">
                            <div class="panel-heading">
                               <h4 class="panel-title">
                                  <a data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne">
                                  Sub menu 1
                                  </a>
                               </h4>
                            </div><!--/.panel-heading -->
                            <div id="nested-collapseOne" class="panel-collapse collapse">
                               <div class="panel-body">
                                <a href="/newsite/item1">Item 1</a>
                               </div>
                               <div class="panel-body">
                                <a href="//newsite/item2">Item 2</a> 
                               </div>
                               <div class="panel-body">
                                 <a href="/newsite/item3">Item 3</a> 
                               </div>
                               <div class="panel-body">
                                 <a href="/newsite/item4">Item 4</a> 
                               </div>
                               <div class="panel-body">
                                 <a href="/newsite/item5">Item 5</a> 
                               </div>
                               <!--/.panel-body -->
                            </div><!--/.panel-collapse --> 
                         </div><!-- /.panel --> 

                                <div class="panel panel-default">
                                   <div class="panel-heading">
                                      <h4 class="panel-title">
                                         <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo">
                                         Sub menu 2
                                         </a>
                                      </h4>
                                   </div><!--/.panel-heading -->
                                   <div id="nested-collapseTwo" class="panel-collapse collapse">
                                      <div class="panel-body">
                                   New item ect...
                                      </div><!--/.panel-body -->
                                   </div><!--/.panel-collapse -->
                                </div><!-- /.panel -->

                            </div>
                        </div>
                    </div>
                </div>
  </div>

这是jQuery代码：

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="glyphicon glyphicon-plus"></i>');
    $('#accordion').on('show.bs.collapse', function (e) {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});

Answer 1

试试这个：两个解决方案

1 -

$(document).ready(function(){
  var windowWidth = $(window).width();
  if(windowWidth <= 1024) //for iPad & smaller devices
     $('.panel-collapse').removeClass('in')
});

2- 在你的CSS中：

@media (max-width: 768px) 
{
  .collapse.in {
        display: none;
    }
}

Answer 2

似乎它可能与phptal有关。我有一个共享文件的侧边栏。并导入它：

<div metal:use-macro="../../${templates}/common.html/leftmenu" />
<!-- the content-->
</tal:block>

但是我不知道如何从普通文件导入到移动设备以显示它是否正确？

Bootstrap手风琴面板不会在平板电脑/手机中崩溃

2 个答案: