切換後菜單消失

Question

當窗口寬度爲720px或更小時，我有一個下拉列表菜單。當分辨率超過該分辨率時，li元素將顯示爲表格單元格。下拉菜單本身工作正常，但是當我關閉菜單並將分辨率擴大到720px時，整個列表都消失了。我如何解決這個問題，以便列表始終可見720像素以上？

這裏是我的情況下，問題的照片我沒有說太清楚解釋：

HTML

<div class='menu'> 
    <button type='button' class='showList'>Menu</button> 
    <div class='full_list'> 
     <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
    </div> 
</div> 

CSS

.full_list { 
    display: none; 
} 

@media (min-width: 720px) { 
    .full_list { 
     display: block; 
    } 

    .menu button { 
     display: none; 
    } 

    .menu { 
     display: table; 
     background: #fff; 
     margin: 0 auto; 
    } 

    li { 
     display: table-cell; 
     vertical-align: middle; 
    } 

    ul { 
     white-space: nowrap; 
    } 
} 

的Javascript

$(document).ready(function() { 
    $('.showList').click(function() { 
     $('.full_list').slideToggle("fast"); 
    }); 
}); 

Click here for the fiddle 前務必和點擊菜單按鈕後，調整其大小。

感謝您的幫助！

Answer 1

一個更好的方法，這樣做會做toggle類。

創建一個類 -

.full_list-expanded { 
     display: block; 
} 

，並修改了jQuery原樣

$(document).ready(function() {  
    $(".showList").click(function() {  
     $(".full_list").slideToggle(400, function() { 
      $(this).toggleClass("full_list-expanded").css('display', ''); 
     });  
    }); 
}); 

這裏是fiddle。

Answer 2

正如你希望.full_list保持其diplay:block不是由.slideToggle()影響，添加！重要的是

.full_list { 
     display: block; 
    } 

，使其成爲

.full_list { 
    display: none; 
} 

@media (min-width: 720px) { 
    .full_list { 
     display: block !important; 
    } 

    .menu button { 
     display: none; 
    } 

    .menu { 
     display: table; 
     background: #fff; 
     margin: 0 auto; 
    } 

    li { 
     display: table-cell; 
     vertical-align: middle; 
    } 

    ul { 
     white-space: nowrap; 
    } 
} 

見jsfiddle，或者您jsfiddle

的改變版本

Answer 3

<style> 
    .full_list { 
     display: none; 
    } 
    .showList{ 
     border: none; 
     width: 100%; 
     padding: 5px 0px; 
     text-align: center; 
     background: #CCC; 
     cursor: pointer; 
    } 
    .full_list{ 
     width: 100%; 
     float: left; 
    } 
    .full_list > ul{ 
     float: left; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
     width: 100%; 
    } 
    .full_list > ul > li{ 
     list-style: none; 
     text-align: center; 
     padding: 5px 0px; 
     border-left: 1px solid #CCC; 
     border-right: 1px solid #CCC; 
     border-bottom: 1px solid #CCC; 
     width: 99%; 
     float: left; 
    } 

    @media (min-width: 720px) { 
     .full_list { 
      display: block; 
     } 

     .menu button { 
      display: none; 
     } 

     .menu { 
      display: table; 
      background: #fff; 
      margin: 0 auto; 
     } 

     li { 
      display: table-cell; 
      vertical-align: middle; 
     } 

     ul { 
      white-space: nowrap; 
     } 

    } 
</style> 
<div class='menu'> 
    <button type='button' class='showList'>Menu</button> 
    <div class='full_list'> 
     <ul> 
      <li>dsdsadsa</li> 
      <li>sadsadsadsad</li> 
      <li>fdsfds</li> 
     </ul> 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.showList').click(function() { 
      $('.full_list').slideToggle("fast"); 
     }); 
    }); 
</script> 

Answer 4

雖然fuyushimoya的解決方案是功能性的，但必須儘可能地避免使用!important。它應該被視爲最後的手段。

嘗試修改的jQuery這樣的 -

$(document).ready(function() { 
    $('.showList').click(function() { 
     $('.full_list').slideToggle("fast"); 
    }); 
    $(window).resize(function(){ 
    if($(window).width()>=720) 
     $('.full_list').css('display','block'); 
    else 
     $('.full_list').css('display','none'); 
    }); 
}); 

這是fiddle