Html 默认情况下打开所有css手风琴div（无jquery）
我用这个： 我希望有能力有多个手风琴节打开一次，并在页面加载。我的意思是，当一个打开时，我不希望另一个关闭。这可能吗？也没有javascript 忽略所有的子手风琴太-我只需要一层 HTML 我试图避免使用任何java脚本。Html 默认情况下打开所有css手风琴div（无jquery）,html,css,accordion,Html,Css,Accordion,我用这个： 我希望有能力有多个手风琴节打开一次，并在页面加载。我的意思是，当一个打开时，我不希望另一个关闭。这可能吗？也没有javascript 忽略所有的子手风琴太-我只需要一层 HTML 我试图避免使用任何java脚本。 这可能吗？不，这不可能仅使用css，因为您的示例使用CSS3:target选择器。当你点击另一个项目时，目标会改变 不能用css设置状态，但可以设置样式。如果您想在单击后保持每个部分的打开状态，则必须使用javascript，但不需要jQuery 如果您想使用javascr
这可能吗？不，这不可能仅使用css，因为您的示例使用CSS3:target选择器。当你点击另一个项目时，目标会改变 不能用css设置状态，但可以设置样式。如果您想在单击后保持每个部分的打开状态，则必须使用javascript，但不需要jQuery 如果您想使用javascript，这将尽可能地模仿css，同时允许手风琴保持打开状态。要关闭手风琴，只需再次单击标题
var lists = document.querySelectorAll('.accordion > li > a'); // get list title links
for (var i = 0; i < lists.length; i++) { // for each list title link
lists[i].href = "javascript:void()"; // stop the page from jumping
lists[i].onclick = function(e) { // when you click the link
var items = e.target.parentNode.querySelectorAll('li'); // get all list items that are siblings of the clicked link
for (var x = 0; x < items.length; x++) { // for each list item
if (items[x].style.height != '33px') { // if its not open
items[x].style.height = '33px'; // open it
} else { // otherwise
items[x].style.height = '0px'; // close it
}
}
};
}
注意：target选择器的任何样式都将不再有效，但如果用户禁用了javascript，则应将其保留在css中作为备用样式。不，这不可能仅使用css，因为您的示例使用CSS3:target选择器。当你点击另一个项目时，目标会改变 不能用css设置状态，但可以设置样式。如果您想在单击后保持每个部分的打开状态，则必须使用javascript，但不需要jQuery 如果您想使用javascript，这将尽可能地模仿css，同时允许手风琴保持打开状态。要关闭手风琴，只需再次单击标题
var lists = document.querySelectorAll('.accordion > li > a'); // get list title links
for (var i = 0; i < lists.length; i++) { // for each list title link
lists[i].href = "javascript:void()"; // stop the page from jumping
lists[i].onclick = function(e) { // when you click the link
var items = e.target.parentNode.querySelectorAll('li'); // get all list items that are siblings of the clicked link
for (var x = 0; x < items.length; x++) { // for each list item
if (items[x].style.height != '33px') { // if its not open
items[x].style.height = '33px'; // open it
} else { // otherwise
items[x].style.height = '0px'; // close it
}
}
};
}
注意：虽然任何带有：target选择器的样式都将不再有效，但您应将它们保留在css中作为备用，以防用户禁用javascript。此css使用此样式将所有手风琴显示为已关闭：
.accordion li > .sub-menu li {
height: 0px;
}
唯一的解决方案是使用javascript….此css使用此样式显示所有手风琴的闭合状态：
.accordion li > .sub-menu li {
height: 0px;
}
简而言之，不是。当css使用：target伪选择器时，OpenAccordion基于url，一次只能是一个。要拥有多个开放状态，您需要使用js。唯一的另一个选择是让它们一直打开删除高度：0；但这样就不是手风琴了，可以通过修改HTML和CSS来实现。不过这有点像黑客。简而言之，不是。当你的css使用：target伪选择器时，OpenAccordion是基于url的，一次只能有一个。要拥有多个开放状态，您需要使用js。唯一的另一个选择是让它们一直打开删除高度：0；但这样就不是手风琴了，可以通过修改HTML和CSS来实现。不过这有点像黑客。那么你能推荐javascript吗？避免jquery是理想的选择。谢谢删除了一些评论我已经让它工作了，但是它讨厌href=javacscript行，所以我又回到了href=one等。没有其他方法可以避免“屏幕抓拍”了吗？如果html中没有javascript，那么你能推荐javascript吗？避免使用jquery是非常困难的
完美的谢谢删除了一些评论我已经让它工作了，但是它讨厌href=javacscript行，所以我又回到了href=one等。没有其他方法可以避免“屏幕抓拍”了吗？没有html中的javascript？你知道我可以使用的java吗？但是我必须避免使用jquery。任何想法都很好。@jnapier不要使用Java，使用Javascript。它们不一样。完全记住Java对于Javascript就像火腿对于仓鼠一样重要！你知道我可以用的java吗？但是我必须避免使用jquery。任何想法都很好。@jnapier不要使用Java，使用Javascript。它们不一样。完全记住Java对于Javascript就像火腿对于仓鼠一样重要！