时间戳

首页 > 解决方案 > 手风琴 CSS 大小问题

javascript - 手风琴 CSS 大小问题

问题描述

我制作了一个包含父行和子行的下拉菜单来显示某些控件。我无法获得 Accordion 的宽度（设置为 100%）来实际拉伸整体。我使用 Chrome 和 Edge 内置的开发人员工具来检查 HTML 并找出哪些元素的宽度设置阻止了我的行增长。

这是我的 SharePoint 页面上当前下拉列表的样子。我希望它及其内容一直延伸到整个页面，但它只是延伸到一半？ 在此处输入图像描述

这是我的 JSFiddle 测试用例：https ://jsfiddle.net/tb36jsew/2/

$(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;
}
.title{
  width: 200%;
  height: auto;
}
.title.drop{
  width: 100%;
}
.content{
  width: 100%;
  height: auto;
}
.ui.styled.accordion {
  width: 200%;
  height: auto;
}
.ui.stackable.grid.container.retro{
  width: 200%;
  height: auto;
}
.one.column.row{
  width: 200%
  height: auto;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
    color: #f2711c;
}
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;
}
<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>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                      <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
                                                    <div class="content">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
  <div class="one column row">
                        <div class="column">
                            <div class="ui styled accordion"> <!-- Accordion parent -->
                                <div class="title"><i class="dropdown icon"></i>Level 3</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>AU.3.045 Review and update logged events.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.3.046 Alert in the event of an audit logging process failure.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.3.048 Collect audit information (e.g., logs) into one or more central repositories.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                      <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.3.049 Protect audit information and audit logging tools from unauthorized access, modification, and deletion.</div>
                                                    <div class="content">

                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.3.050 Limit management of audit logging functionality to a subset of privileged users.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.3.051 Correlate audit record review, analysis, and reporting processes for investigation and response to indications of unlawful, unauthorized, suspicious, or unusual activity.</div>
                                                    <div class="content">

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.3.052 Provide audit record reduction and report generation to support on-demand analysis and reporting.</div>
                                                    <div class="content">
      
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
<div class="backbtn">
<a href="/cyber/controls.aspx" class="previous">&laquo; Go Back</a>
</div>

标签： javascripthtmljquerycsssharepoint

解决方案

首先，您需要在 htmldiv之前添加一个关闭.backbtn

      </div>
    <div class="backbtn">

然后在CSS中：

  • 加入width: auto;_.ui.styled.accordion .accordion .title, .ui.styled.accordion .title
  • 删除所有宽度：200; height: auto
  • 最重要的在你的CSS末尾添加以下内容
.ui.styled.accordion{
  width: auto !important;
}

你需要它来覆盖语义用户界面

小提琴：https ://jsfiddle.net/yvbenitah/sg06x4rc/4/

推荐阅读