- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我重用了网站中的一些代码并制作了一个购物车 Accordion 模块。我将整个代码作为 codepen 上的笔。这是笔的链接:http://codepen.io/applecool/pen/YXaJLa
<div class="summary">
<button class="expand btn btn-lg">Collapse All for Summary</button>
</div>
上面按钮的 HTML:我在底部添加了一个名为“为摘要折叠所有”的按钮。此按钮的用途:当用户单击该按钮时,它应该打开所有 Accordion 选项卡,再次单击它时,应该关闭 Accordion 选项卡。 [即典型的切换功能]。
我写了一个小的 javascript 函数来切换 Accordion 选项卡,但它有很多错误。它完美地完成了工作,但问题是,一旦我点击按钮,一般点击选项卡就不起作用了。即,当您打开代码笔并单击 Accordion 选项卡时,它会顺利打开和关闭。但是在添加切换按钮功能后,您启动页面,单击“为摘要折叠所有”按钮, Accordion 选项卡工作正常。现在,当您尝试单击任何关闭或打开的 Accordion 选项卡时,该选项卡既不会打开也不会关闭。我认为问题肯定出在我正在使用 CSS 在 javascript 中所做的类更改。
脚本:
$('.expand').click(function(){
if($('.accordionItem.is-collapsed').css('max-height')== '0px'){
$('.accordionItem.is-collapsed').css({
'max-height': '900px'
});
}else if($('.accordionItem.is-collapsed').css('max-height')== '900px'){
$('.accordionItem.is-collapsed').css({
'max-height': '0px'
});
}
});
特定于上述脚本和按钮 div 的 CSS:
.accordionItem.is-collapsed{
max-height: 0px;
}
如有任何帮助,我们将不胜感激。如果有任何解决方法,我也很乐意遵循。请让我知道我在这里犯了什么愚蠢的错误。 :)
谢谢。
干杯,.SH
最佳答案
我稍微编辑了您的代码以包含展开/折叠所有功能。我认为它很草率,你应该在实现之前清理它,但它完成了工作。
根据您是单击单个元素还是展开/折叠全部按钮,添加项利用数组循环遍历一个元素或所有元素。这样做的好处是它与原始代码相同,但可以处理切换多个元素的类。
我在解释更多的 JavaScript 中添加了一些注释。
//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function() {
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported = ('ontouchstart' in window),
pointerSupported = ('pointerdown' in window);
skipClickDelay = function(e) {
e.preventDefault();
e.target.click();
}
setAriaAttr = function(el, ariaType, newProperty) {
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded) {
switch (expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
e.preventDefault();
var questions = [],
answers = [];
//if expand-all button is clicked, then push all questions and answers into respective arrays
if($(e.target).hasClass('expand')) {
$('.accordion-title').each( function(index) {
questions.push(this);
answers.push(this.parentNode.nextElementSibling);
});
}
//else if an individual item is clicked, then push its question and answer into respective arrays
else {
questions.push(e.target);
answers.push(e.target.parentNode.nextElementSibling);
}
//original code wrapped in "for" loop to handle single item or all items
for (var i = 0, len = questions.length; i < len; i++) {
var thisQuestion = questions[i];
var thisAnswer = answers[i];
if (thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');
thisAnswer.classList.toggle('animateIn');
}
};
for (var i = 0, len = accordionToggles.length; i < len; i++) {
if (touchSupported) {
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
}
if (pointerSupported) {
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
}
accordionToggles[i].addEventListener('click', switchAccordion, false);
}
//add listener for the expand-all button
$('.expand').on('click', switchAccordion);
})();
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
* {
box-sizing: border-box;
border-radius: 5px;
}
body {
font-family: 'Libre Baskerville';
}
.heading-primary {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl,
.accordion-list {
border: 1px solid #ddd;
}
.accordion dl:after,
.accordion-list:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #099DF6;
}
.accordion dd,
.accordion__panel {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #eee;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle,
.accordion__Heading {
background-color: #099DF6;
/*text-align: center; */
text-indent: 3px;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
border-bottom: 1px solid #30bb64;
}
.accordionTitle:before,
.accordion__Heading:before {
content: "+";
font-size: 1.5em;
line-height: 0.9em;
float: left;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover,
.accordion__Heading:hover {
background-color: #38CC70;
}
.accordionTitleActive,
.accordionTitle.is-expanded {
background-color: #38CC70;
}
.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
-webkit-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: auto;
max-height: 900px;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 900px;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItem.is-collapsed {
max-height: 0;
}
.no-js .accordionItem.is-collapsed {
max-height: 900px;
}
.animateIn {
-webkit-animation: accordionIn 0.65s normal ease-in-out both 1;
animation: accordionIn 0.65s normal ease-in-out both 1;
}
.animateOut {
-webkit-animation: accordionOut 0.75s alternate ease-in-out both 1;
animation: accordionOut 0.75s alternate ease-in-out both 1;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
/*label styles */
.label-style {
float: left;
margin-right: 15px;
padding-top: 5px;
padding-left: 100px;
}
/* form headings */
.headings {
text-align: center;
font-weight: bold;
}
/* button styles */
.button-container {
text-align: center;
margin-bottom: 5px;
}
/* position of the hint */
.hint {
display: inline-block;
position: relative;
margin-left: 0.5em;
margin-top: 0.3em;
}
/* background style for 'i' */
.hint-icon {
background: #099DF6;
border-radius: 10px;
cursor: pointer;
display: inline-block;
font-style: normal;
font-family: 'Libre Baskerville';
height: 20px;
line-height: 1.3em;
text-align: center;
width: 20px;
}
/* hint icon hover style */
.hint-icon:hover {
background: #1f8ac9;
}
/* Displays the hint. important! Do not remove. */
.hint:hover .hint-description,
.hint:focus .hint-description {
display: inline-block;
}
/* position of the hint */
.hint-description {
display: none;
background: #3b3b3b;
border: 1px solid #099DF6;
border-radius: 3px;
font-size: 0.8em;
color: #ffffff;
font-weight: bold;
/*padding: 1em; */
position: absolute;
left: 30px;
top: -15px;
width: 180px;
height: auto;
}
/* styling for the arrow */
.hint-description:before,
.hint-description:after {
content: "";
position: absolute;
left: -11px;
top: 15px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #099DF6;
}
/* overlay styling */
.hint-description:after {
left: -10px;
border-right-color: #3b3b3b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Used some part of the code from Chris Wright (http://codepen.io/chriswrightdesign/)'s Pen -->
<div class="container">
<h1 class="heading-primary">Accordion Checkout Form Version 0.1 </h1>
<div class="accordion">
<dl>
<!-- description list -->
<dt>
<!-- accordion tab 1 - Delivery and Pickup Options -->
<a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Delivery and Pickup Options</a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
<p>One can insert a div here and add the product image and the description of the product. Quantity, Cost.</p>
</dd>
<!--end accordion tab 1 -->
<dt>
<!-- accordion tab 2 - Shipping Info -->
<a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">Shipping Information</a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Shipping Address</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="zipcode" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 2 -->
<dt>
<!-- accordion tab 3 - Payment Info -->
<a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger">Payment Information</a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Billing Information</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 3 -->
</dl>
<!-- end description list -->
</div>
<!-- end accordion -->
</div>
<!-- end container -->
<div class="summary">
<button class="expand btn btn-lg">Expand/Collapse All for Summary</button>
</div>
关于javascript - 单击按钮切换 Accordion 选项卡的脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32073922/
我有 powershell 脚本。通过调度程序,我运行 bat 文件,该文件运行 PS1 文件。 BAT文件 Powershell.exe -executionpolicy remotesigned
什么更快? 或者 $.getScript('../js/SOME.js', function (){ ... // with $.ajaxSetup({ cache: true });
需要bash脚本来显示文件 #!/bin/bash my_ls() { # save current directory then cd to "$1" pushd "$1" >/dev/nu
我有一个输入 csv 文件,实际上我需要在输入文件中选择第 2 列和第 3 列值,并且需要转换两个值的时区(从 PT 到 CT),转换后我需要替换转换后的时区值到文件。 注意: 所有输入日期值都在太平
我正在使用/etc/init.d/httpd 作为 init.d 脚本的模板。我了解文件中发生的所有内容,但以下行除外: LANG=$HTTPD_LANG daemon --pidfile=${pid
我有以下选择: python runscript.py -O start -a "-a "\"-o \\\"-f/dev/sda1 -b256k -Q8\\\" -l test -p maim\""
我对 shell 脚本完全陌生,但我需要编写一个 shell 脚本来检查文件是否存在,然后移动到另一个位置 这是我写的: 一旦设备崩溃,我就会在/storage/sdcard1/1 中收集日志 #!/
我正在使用 bash 脚本从文本文件中读取数据。 数据: 04:31 Alex M.O.R.P.H. & Natalie Gioia - My Heaven http://goo.gl/rMOa2q
这是单击按钮时运行的 javascript 的结尾 xmlObj.open ('GET', /ajax.php, true); xmlObj.send (''); } 所以这会执行根目录中的php脚本
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我需要将文件转换为可读流以通过 api 上传,有一个使用 fs.createReadStream 的 Node js 示例。任何人都可以告诉我上述声明的 python 等价物是什么? 例子 const
我有一个 shell 脚本 cron,它从同一目录调用 python 脚本,但是当这个 cron 执行时,我没有从我的 python 脚本中获得预期的输出,当我手动执行它时,我的 python 脚本的
如何使 XMLHttpRequest (ajax) 调用的 php 脚本安全。 我的意思是,不让 PHP 文件通过直接 url 运行,只能通过脚本从我的页面调用(我不想向未登录的用户显示数据库结果,并
我正在尝试添加以下内容 我正在使用经典的 asp。但我不断收到的错误是“一个脚本 block 不能放在另一个脚本 block 内。”我尝试了此处的 document.write 技术:Javasc
如何从另一个 PHP 脚本(如批处理文件)中运行多个 PHP 脚本?如果我了解 include 在做什么,我认为 include 不会起作用;因为我正在运行的每个文件都会重新声明一些相同的函数等。我想
我想创建具有动态内容的网页。我有一个 HTML 页面,我想从中调用一个 lua 脚本 如何调用 lua 脚本? ? ? 从中检索数据?我可以做类似的事情吗: int xx = 0; xx
我删除了我的第一个问题,并重新编写了更多细节和附加 jSfiddle domos。 我有一个脚本,它运行查询并返回数据,然后填充表。表中的行自动循环滚动。所有这些工作正常,并通过使用以下代码完成。然而
我尝试使用 amp 脚本,但收到此错误: “[amp-script] 脚本哈希未找到。amp-script[script="hello-world"].js 必须在元[name="amp-script
我有一个读取输入的 Shell 脚本 #!/bin/bash echo "Type the year that you want to check (4 digits), followed by [E
我正在从 nodejs 调用 Lua 脚本。我想传递一个数组作为参数。我在 Lua 中解析该数组时遇到问题。 下面是一个例子: var script = 'local actorlist = ARGV
我是一名优秀的程序员,十分优秀!