javascript - 手风琴遇到 jQuery 问题
问题描述
我目前正在使用 Accordion 和 jQuery 制作 HTML 下拉菜单。例如,在下面的片段中,我有不同级别的 AU 控件。我想用级别等级组织父行,然后在每个级别父行下组织适当的控件。
$(document).ready(function() {
$('.ui.accordion').accordion();
/* Alternative way to change color of accordion */
//$(".drop").css("color", "yellow");
});
/* this doesn't work*/
.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 100%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title:hover {
color: #f2711c;
}
<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">
<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="three 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">
hi
</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">
hi
</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">
hi
</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">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
更新: 我已经解决了嵌套问题并且能够解决这个问题。现在我遇到的问题是我认为与 jQuery 相关的问题。当我在 JSFiddle 中运行我的测试用例时,父行打开,并包含我想要的所有正确子行。当我尝试打开子行时,它们会打开半秒钟,然后立即折叠。
解决方案
好的,在测试并阅读文档后,我发现了问题。您将多个嵌套的 div 与accordion
现在让我们看看您的 html 并尝试找出问题所在。
这是您的原始 Html
<div class="ui stackable grid container">
<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="">
<div class="three 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">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
现在,如果您仔细观察,您会看到不止一个包含.ui.accordion
触发问题的 div。
最好的解决方案是给 div( ui stackable grid container
) 一个新的类或 ID,并尝试将它与这个 ID 绑定。
这是结果
$(document).ready(function(){
$('.retro').accordion();
/* Alternative way to change color of accordion */
//$(".drop").css("color", "yellow");
});
/* this doesn't work*/
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 100%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
color: #f2711c;
}
<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="three 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">
hi
</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">
hi
</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">
hi
</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">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- c++ - 如何使gdb仅输出到文件
- c - 打印笑脸
- database - JPA如何设计多个表与公用表的一对一关系
- git - 告诉 Git 使用几个自签名证书作为受信任的
- reactjs - 大型 react-final-form 分布在多个部分
- c++ - 在 C++ 中,如何将 uint16_t 变量传递给带有参数 unsigned int & 的函数?
- jquery - $.fn 链方法 - 调用变量
- html - 单击时引导菜单图标向上移动
- docker - 在私有管道中设置 VSTS 代理的 docker 权限
- websphere - Websphere 7.0 - 为什么 Web 服务器插件属性不可编辑