我使用 jQuery 和 HTML 创建了一个手风琴来显示控件的响应式下拉列表。我注意到并且正在尝试解决的问题是为什么当我只有一个父行时，我的上一个按钮不会停留在“一列行”div 下，但是当我有 2 个以上父行时，后退按钮起作用完美。下面附上一个 JSFiddle，包含工作示例和非工作示例。这是不起作用的 JSFiddle：https ://jsfiddle.net/n3msLd6b/这是有效的 JSFiddle： https: //jsfiddle.net/ry1L6pjz/如果你注意到后退按钮，在第二个按钮中，它恰好在它应该在的位置，而在第一个按钮中，它全乱了。不添加代码就无法发布 Fiddles，所以我将在下面添加不起作用的代码，只需忽略$(document).ready(function(){ $('.retro').accordion(); } );.ui.styled.accordion .accordion .title, .ui.styled.accordion .title { color: black; background-color: #eee; cursor: pointer; padding: 18px; width: 200%; height: auto; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.5s; width: auto;}.title{ width: 200%; height: auto;}.title.drop{ width: 100%;}.content{ width: 100%; height: auto;}.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover { color: #f2711c;}.ui.stackable.grid.container.retro{ position: static !important;}a.previous { text-decoration: none; display: inline-block; padding: 8px 16px;}a:link, a:visited { color: #b3ab7d;}a.previous:hover { background-color: #104723; color: #b3ab7d;}.backbtn{ padding-left: 0px; padding-top: 10px;}.previous { background-color: #104723; color: #b3ab7d; text-decoration: none;}.ui.styled.accordion{ width: 100% !important;}.content { text-align: center;}.header {display: block; text-align: center; font-size:5em; color: #b3ab7d; font-weight: bold;}
1 回答
慕娘9325324
TA贡献1783条经验 获得超4个赞
删除现有的按钮样式代码并使用更新的 CSS。
$(document).ready(function(){
$('.retro').accordion();
}
);
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 200%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
width: auto;
}
.title{
width: 200%;
height: auto;
}
.title.drop{
width: 100%;
}
.content{
width: 100%;
height: auto;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
color: #f2711c;
}
.ui.stackable.grid.container.retro{
position: static !important;
}
a.previous {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:link, a:visited {
color: #b3ab7d;
}
a.previous:hover {
background-color: #104723;
color: #b3ab7d;
}
.backbtn{
padding-left: 0px;
padding-top: 10px;
}
.previous {
background-color: #104723;
color: #b3ab7d;
text-decoration: none;
}
.ui.styled.accordion{
width: 100% !important;
}
.content {
text-align: center;
}
.header {display: block; text-align: center; font-size:5em; color: #b3ab7d; font-weight: bold;}
/* New Style */
.backbtn{
padding: 1rem;
}
<div class="header">
<h1>Personnel Security (PS)</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container retro">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>PS.2.127 Screen individuals prior to authorizing access to organizational systems containing CUI.</div>
<div class="content">
<div class="panel">
<table class="controlTable" width="100%">
<tr>
<th>Resource(s)</th>
</tr>
<tr>
<td class="firstRow">• <a href="www.google.com">PS.2.127 Document Set</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>PS.2.128 Ensure that organizational systems containing CUI are protected during and after personnel actions such as terminations and transfers.</div>
<div class="content">
<div class="panel">
<table class="controlTable" width="100%">
<tr>
<th>Resource(s)</th>
</tr>
<tr>
<td class="firstRow">• <a href="www.google.com">PS.2.128 Document Set</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="backbtn">
<a href="/cyber/SitePages/controls.aspx" class="previous">« Go Back</a>
</div>
添加回答
举报
0/150
提交
取消