0
基本上我正在使用過濾器來過濾表格內容。我有四個過濾器來處理。當我使用Bootstrap時，他們反應迅速。但是，當我將瀏覽器窗口調整爲75％寬度時，則兩列視圖跳入。在兩列視圖中，除第一個下拉列表（產品）外，所有下拉列表都可以正常工作。當我打開第一個下拉菜單並關閉所有其他下拉菜單時，所有下拉菜單都會移至過濾器1右側。我希望產品下拉菜單的行爲與觀衆下拉菜單類似。 This is the product dropdown, I want it to open like audience dropdown ............. This is the audience dropdown響應式下拉菜單在兩列視圖中無法正常打開
function showFilter(filter) {
var x = document.getElementById(filter.parentNode.childNodes[3].id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
\t }.filter-button {
\t width: 100%;
\t background-color: #005387;
\t -webkit-border-radius: 0px;
\t -moz-border-radius: 0px;
\t border-radius: 0px;
\t vertical-align: bottom;
\t }
\t
\t .filter-menu {
\t width: 100%;
\t height: 110px;
\t overflow: auto;
\t -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
\t -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
\t box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
\t -webkit-border-radius: 0px;
\t -moz-border-radius: 0px;
\t border-radius: 0px;
\t padding:10px;
\t border: 1px solid #ddd;
\t }
\t
\t /* attaches the filter toggles to the top of the filter boxes */
\t #product-filters, #language-filters, #medium-filters {
\t vertical-align: top;
\t }
\t
\t /* filter menu items */
\t .filter-menu input {
\t vertical-align: top;
\t }
\t \t
\t .filter-label {
\t font-weight: normal !important;
\t margin-left: 10px;
\t margin-bottom:7px;
\t }
\t
\t .filter-label:before {
\t font-weight: normal !important;
\t }
\t
\t .filter-box {
padding-left:500px !important;
\t }
\t
\t .filter-menu li {
\t list-style-type: none;
\t }
\t .filter-parent {
\t margin:0;
\t }<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t <!-- Products Filter Menu -->
\t \t \t \t \t \t
<div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "product-filters">
\t \t \t \t \t \t <button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Products
\t \t \t \t \t \t <span class="caret caret-reversed"></span></button>
\t \t \t \t \t \t <ul class="filter-menu" id="productFilters">
\t \t \t \t \t \t <!--Filters load dynamically here-->
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t \t <!-- Roles Filter Menu -->
\t \t \t \t \t \t
\t \t \t \t \t \t <div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "role-filters">
\t \t \t \t \t \t <button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Audiences
\t \t \t \t \t \t <span class="caret caret-reversed"></span></button>
\t \t \t \t \t \t <ul class="filter-menu" id="roleFilters">
\t \t \t \t \t \t <!--Filters load dynamically here-->
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t \t <!-- Delivery Methods Filter Menu -->
\t \t \t \t \t \t <div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "medium-filters">
\t \t \t \t \t \t <button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Delivery Methods
\t \t \t \t \t \t <span class="caret caret-reversed"></span></button>
\t \t \t \t \t \t <ul class="filter-menu" id="mediumFilters">
\t \t \t \t \t \t <!--Filters load dynamically here-->
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t \t <!-- Languages Filter Menu -->
\t \t \t \t \t \t <div class = "filter-parent col-xs-12 col-sm-6 col-md-3 col" id = "language-filters">
\t \t \t \t \t \t <button class="btn btn-primary filter-button" type="button" data-toggle="dropdown" onclick="showFilter(this)">Languages
\t \t \t \t \t \t <span class="caret caret-reversed"></span></button>
\t \t \t \t \t \t <ul class="filter-menu" id="languageFilters">
\t \t \t \t \t \t <!--Filters load dynamically here-->
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div> <!--end of row div-->
\t \t \t \t \t </div> <!-- end of filter container div -->
</body>