2017-04-01 91 views
0

在網站中我使用了一個菜單。如果您使用PC呼叫該頁面,該菜單應該完全可見。如果您使用移動電話呼叫該頁面,則只能看到一個按鈕,並且只需單擊該按鈕,即可打開該菜單。需要幫助... Bootstrap按鈕/ matchMedia/removeClass

在PC版本中一切正常。菜單是可見的,按鈕隱藏。

使用手機撥打電話時,該按鈕可見。菜單也被摺疊出來。

下面是代碼:

<button class="btn btn-default btn-block hidden-md hidden-lg hidden-xl" data-toggle="collapse" data-target="#menulist">Show more ...</button> 
 

 
<div id="menulist" class="collapse in"> 
 
\t <div class="panel-body nav-menu-left"> 
 
\t \t <table class="table"> 
 
\t \t \t <tr><td><a href="1.php">Menu 1</a></td></tr> \t \t \t \t \t \t \t \t 
 
\t \t \t <tr><td><a href="2.php">Menu 2</a></td></tr> 
 
\t \t \t <tr><td><a href="3.php">Menu 3</a></td></tr> 
 

 
\t \t </table> 
 
\t </div> 
 
</div> 
 
\t \t \t \t \t 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    if (matchMedia) { 
 
\t var mq = window.matchMedia("(max-width: 765)"); 
 
\t mq.addListener(WidthChange); 
 
\t WidthChange(mq); 
 
    } 
 

 
    function WidthChange(mq) { 
 
\t if (mq.matches) { 
 
\t 
 

 
\t $("#menulist").removeClass("in"); 
 
\t } 
 
    } 
 
}); 
 
</script>

回答

0

就刪除此行

<div id="menulist" class="collapse in"> 

<div id="menulist" class="navbar-collapse collapse"> 
+0

Yeeeees。有用。 非常感謝。 ; o) – Michael74

+0

不客氣。祝你有美好的一天! ;) –