- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经制作了这些 Accordion 导航并且它(主要)按预期工作。
但是:如果通过单击展开/收缩按钮打开文本部分,您可以看到整个内容容器分别向左和向右移动。
目前我不知道这些移动是否来了或如何防止它。
也许有人知道哪里出了问题?
// Get all span-"buttons".
var buttons = document.querySelectorAll('.sign');
buttons = Array.prototype.slice.call(buttons);
// Toggles the visibility of the text-paragraphs.
function toggleDisplayed() {
var section = this.parentNode;
var paragraphs = section.getElementsByTagName('p');
// Storing the context.
var that = this;
// Removes a class and adds the opposite class.
// --- Parameter -------
// 1.: Paragraph-element on which to add / remove.
// 2.: The class to remove.
// 3.: The class to add.
// 4.: The text-node of the span-element.
var manageClasses = function(paragraphObject, toRemove, toAdd, newSign) {
paragraphObject.classList.remove(toRemove);
paragraphObject.classList.add(toAdd);
that.textContent = newSign;
}
paragraphs = Array.prototype.slice.call(paragraphs);
// Change the state of the paragraphs in the section.
paragraphs.forEach(function(paragraph, i) {
if (paragraph.classList.contains('notDisplayed')) {
manageClasses(paragraph, 'notDisplayed', 'displayed', '-');
} else {
manageClasses(paragraph, 'displayed', 'notDisplayed', '+');
}
});
}
// Attach the toggle-function to all span-"buttons".
buttons.forEach(function(button, i) {
button.addEventListener('click', toggleDisplayed)
});
body {
background-color: rgba(240, 240, 240, 1.0);
overflow-y: scroll;
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 10px 25px;
background-color: rgba(250, 250, 250, 1.0);
border-radius: 6px;
}
.wrap h3 {
display: inline-block;
width: 200px;
}
/* The toggle-Button */
.sign {
font-size: 120%;
font-weight: bold;
color: white;
background-color: rgba(50, 50, 50, 1.0);
border-radius: 30%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
display: inline-block;
}
.sign:hover {
background-color: rgba(50, 50, 50, 0.7);
}
.notDisplayed {
display: none;
}
.displayed {
display: block;
}
<div class="wrap">
<section>
<h2>About us</h2>
<p> Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero.</p>
</section>
<section class="info-about">
<h3>Current projects</h3><span class="sign">+</span>
<p class="notDisplayed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p class="notDisplayed">Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem.</p>
</section>
<section class="info-about">
<h3>Future projects</h3><span class="sign">+</span>
<p class="notDisplayed">Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut a nisl id ante tempus hendrerit.</p>
</section>
<section class="info-about">
<h3>Closed projects</h3><span class="sign">+</span>
<p class="notDisplayed">Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius. Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vivamus aliquet elit ac nisl. Fusce fermentum odio nec arcu. Vivamus euismod mauris. In ut quam vitae odio lacinia tincidunt. Praesent ut ligula non mi varius sagittis. Cras sagittis. Praesent ac sem eget est egestas volutpat. Vivamus consectetuer hendrerit lacus. Cras non dolor. Vivamus in erat ut urna cursus vestibulum. Fusce commodo aliquam arcu. Nam commodo suscipit quam.</p>
<p class="notDisplayed">Quisque id odio. Praesent venenatis metus at tortor pulvinar varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>
</section>
</div>
最佳答案
滚动条出现时会发生这种情况,因为您为 wrap
定义了自动边距。您可以打开滚动条,这是最简单的修复方法。只需将此 CSS 属性添加到您的 wrap
DIV:
溢出-y:滚动;
关于javascript - JavaScript/CSS 中的 Accordion 导航 : "Jumping" content-container,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35744354/
ion-nav-view 嵌套有一个奇怪的问题。当我在浏览器中加载应用程序时,我可以看到 URL 正在更改为 /app/menu,但页面上没有出现 menu.html 中的内容。页面是空白的。 以下是
运行截图如下: 源码如下: CN_TEST1
我正在开发一个示例reactjs应用程序(在学习过程中)。我有一个页面,其中列出了用户列表和一个用于添加新用户的添加按钮。 当我单击添加按钮时,我应该导航到用户表单以创建新用户。 单击用户表单中的提交
我的导航栏中的导航链接有问题。首先,它没有在导航栏中间对齐,如下所示: 另一部分是,我正在使用填充来执行此操作,因此如果我放置除“测试”以外的任何内容或将其放在不同的情况下,等等。它会重复该框。代码预
基本上,我有一个网站,我正在尝试使用 ajax 导航构建它,以便它获取网页并将它们加载到同一页面中。问题是当我正常放入内容时它工作正常但是当我尝试将内容添加到外部文档并从导航中访问它时框拆分你可以在这
以下站点左侧菜单的导航使用 CSS 进行鼠标悬停链接。 PVH 当我获取导航代码并将其设为单独的页面时。然后鼠标悬停链接不起作用。可能是什么原因? Test 最佳答案 可能... 对此事有话要说
一 问题描述 标准的 Web 浏览器包含在最近访问过的页面中向后和向前移动的功能。实现这些特性的一种方法是使用双栈来跟踪前后移动可以到达的页面。 Web 导航支持下面的命令。 后退页面:将当前页面推到
我想有条件地导航到某个页面。如果某些条件为真,我想导航到其他页面,否则我想留在同一页面上。我有类似的东西:- 在 bean.navigate 我有类似的东西:- public String navi
问题:有没有办法让按钮在用户控件中表现得像超链接? 我已经搜索了几天,但没有找到解决此问题的人。如何使用按钮在 WPF 应用程序中导航?具体来说,如何使用户控件内的按钮在其主机框架中导航?请记住,用户
我尝试使用 Android Navigation 组件并遇到了回栈问题。 我有 fragment A,B。 我写的: Navigation.findNavController(view).naviga
我有一个父布局,并从该子站点派生而来。 父级布局具有一个导航,每个导航点代表一个子站点。 如何在父布局中突出显示当前查看的子站点? 如果看起来如何? 最佳答案 可能不是最好的选择,但这是基于路由名称的
我正在开发Blazor服务器端应用程序。熟悉Blazor的任何人都在左侧的NavBar中填充超链接,并以特殊的CSS类进行装饰。我的问题是,如果任何内容都已编辑,我将试图停止导航并在一个特定页面上显示
我是 flutter 的新手,我正在开发一个具有多个屏幕的应用程序。 我想知道如何阻止 flutter 创建同一路线的多个屏幕, 例如我有 第1页和 第2页 ,如果我单击按钮导航到第 2 页并再次单击
我们的设计师创建了一个类似于上面屏幕的布局。主要思想是创建一个只有一个屏幕的应用程序,当您点击一个按钮时,屏幕的红色部分会发生变化(即 2 个文本框而不是 1 个文本框)。这个应用程序将是一个多平台应
有人可以解释为什么从pageE返回时不打印efeioi吗? 页面A Navigator.pushNamed(context, PageB.ROUTE).then((onValue) {
我需要在 iOS 应用程序中创建一个导航,如下图所示。 它包含一个标签栏和一个侧边菜单。 问题是正确的导航菜单按钮,应该在所有选项卡中都可见。甚至每个选项卡的所有内部屏幕。 当用户从侧面菜单中选择一个
这个问题在这里已经有了答案: Vim: move around quickly inside of long line (8 个答案) 关闭 8 年前。 我正在用 vim 编辑一个文本文件,我已经使
我很困惑,如何执行操作来创建从用户位置到用户选择/点击图钉覆盖层的图钉覆盖层(谷歌位置)的路线/导航。这是我的 map Activity ,它将显示我的 map 。 public class Plac
我正在使用 jQuery 函数 .animate 来一一突出显示导航链接。他们在 ul 中。我可以让它工作,只是想知道是否有一种方法可以缩短我的代码,这样我就不必单独突出显示每个项目。提前致谢 $(d
我正在创建一个带有“ anchor 导航”的网站,就像 Facebook 和谷歌邮件一样。我已经让它工作了,但还不完全。当我加载带有 #contact 之类的页面时,除非我单击它的链接,否则它不会加载
我是一名优秀的程序员,十分优秀!