我是初学者，所以请多多包涵。我在侧边栏的底部有一个 Accordion 和一个固定位置的元素。我的问题是，当 Accordion 打开时，它与位置固定元素重叠。另外，我希望它不会滚动到底部的位置固定元素。我已经尝试了 div 的各种定位，但仍然不行。有人可以赐教吗？谢谢!
$(function () {
$('.ui.accordion').accordion();
});.ui.vertical.footer.segment {
position: fixed;
bottom: 0;
width: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="ui sidebar vertical left menu overlay borderless visible">
<div class="ui accordion">
<a class="title item">
<i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i>
</a>
<div class="content">
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
</div>
</div>
<div class="ui vertical footer segment" id="test">
<i class="fa fa-search" aria-hidden="true"></i> Search
<button class="ui button">
Go
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>最佳答案
我没有找到任何足够干净的 css 方法来解决这个问题。所以我决定寻找一个 jQuery 解决方案。我在找到回调在语义 UI 上的用途时遇到了一些麻烦。简而言之，我花了一些时间，我希望它能为我赢得一些积分，尤其是因为我已经用注释代码进行了广泛的记录。
只在全屏模式下在snippet中操作才好，因为我用的是$(window).resize(function().
结果如下:
$(function () {
var oUser3233787 = { // variables group name of User3233787 problem.
$mn : $('.ui.accordion'), // jQuery Menu objet
mnC : $('.ui.accordion').height(), // height Menu close
mnO : 0, // height Menu open (unknow for the moment)
Fmn : false, // Flag menu open / close
foH : $('#test').outerHeight(), // room size of footer height
mnX : $(window).height() - this.foH // room place max for the menu, deppending on window height
};
oUser3233787.$mn.accordion({
onOpen: function( v1, v2 ) { // open menu event; (v1, v2 documented nowhere...? )
with (oUser3233787) {
if (mnO == 0) // if menu open hight is unknow
mnO = $mn.height(); // get this one
$mn.height(mnO); // set menu hight to open size
Fmn = true; // set Flag = menu is open
if (mnO > mnX) // if menu hight is out of room place
$mn.height(mnX); // set the menu higt fit to it
}
},
onClose: function( v1, v2 ) { // close menu event
with (oUser3233787) {
$mn.height(mnC); // set menu hight to closed size
Fmn = false; // set Flag = menu is not open
}
}
});
$(window).resize(function() {
with (oUser3233787) {
mnX = $(window).height() - foH; // keep this height for the oUser3233787 group
if (Fmn) { // if menu is open
if (mnO > mnX) // and if his open heigh is too big
$mn.height(mnX); // reduce them at room height
if (mnO < mnX) // but if there is enough room
$mn.height(mnO); // restore his open high complete height
}
}
});
}); // jQuery.ui.vertical.footer.segment {
position: fixed;
bottom: 0;
width: 100%;
}
.ui.accordion {
overflow-y: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="ui sidebar vertical left menu overlay borderless visible">
<div class="ui accordion">
<a class="title item">
<i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i>
</a>
<div class="content">
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
</div>
</div>
<div class="ui vertical footer segment" id="test">
<i class="fa fa-search" aria-hidden="true"></i> Search
<button class="ui button">
Go
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>关于javascript - 语义 UI Accordion 重叠位置固定元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47252133/