我在選單中有 2 個 div，它們在點擊時隱藏和顯示。我希望它們與第二張圖片中的同一行并排顯示，而不是被推到新行上。我正在使用 materializecss。
這是標記：
$('#location-filter').on('click', function(e) {
$('#locationFilter').toggle('1000');
$('.location-filter').toggleClass('fa-angle-down fa-times');
});
$('.length-filter').on('click', function(e) {
$('#lengthFilter').toggle('1000');
$('.length-filter').toggleClass('fa-angle-down fa-times');
});
$('.price-filter').on('click', function(e) {
$('#priceFilter').toggle('1000');
$('.price-filter').toggleClass('fa-angle-down fa-times');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col s12 m2 push-m1">
<div class="input-field">
<input class="select-dropdown length-input-filter lengthFilterInput" id="length-slider-toggler" type="text" readonly="true" value="L?ngd">
<i class="fa fa-angle-down length-filter filter length-filter-icon"></i>
</div>
<div class="card studiecentralen-transparency" id="lengthFilter" style="display: none;">
<div class="card-content">
<div class="row">
<div id="length-slider"></div>
<div id="length-values" class="mt-2"></div>
</div>
</div>
</div>
</div>
<div class="col m7 offset-m5">
<div class="card studiecentralen-transparency" id="locationFilter" style="display: none;">
<div class="card-content">
<div class="row">
<label class="col m2">
<input type="checkbox" />
<span>Blekinge</span>
</label>
<label class="col m2">
<input type="checkbox" />
<span>Dalarna</span>
</label>
<label class="col m2">
<input type="checkbox" />
<span>Gotland</span>
</label>
<label class="col m2">
<input type="checkbox" />
<span>Halland</span>
</label>
<label class="col m2" style="width: 200px;">
<input type="checkbox" />
<span>J?mtland H?rjedalen</span>
</label>
</div>
</div>
</div>uj5u.com熱心網友回復：
如果您在 MaterializeCSS 中使用網格系統，您需要為元素留出空間，即使它們是隱藏的。沒有一種簡單的方法可以讓列動態調整大小。
對于您想要的結果，您需要一些使用display:flexcss 指令的自定義 css 。這是您可以調整的示例：
代碼筆：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/377300.html
上一篇：在div中自動滾動
下一篇：嵌套導航切換關閉父級