javascript - HTML 和 jQuery 返回按钮位置不停留

Question

我使用 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;}

<div class="header">
<h1>Personnel Security (PS)</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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">&#8226; <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">&#8226; <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">&laquo; Go Back</a>
</div>

标签： javascripthtmljquerycss

Answer 1

删除现有的按钮样式代码并使用更新的 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">&#8226; <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">&#8226; <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">&laquo; Go Back</a>
</div>