我最近把文字放入手风琴中,使它看起来更漂亮"在我看来,但我在第二个标签上实现了#DarkD规则"它不会显示所有文本,它会切断其余部分。
在"•"应该有更多的文字.. 另外一件事是,我想制作"
这意味着你不会在5分钟内回到死亡点而忘记你的前世。
& #34;向右移动,所以它在文本"(新生活规则)"
任何帮助都会很棒并且赞赏:)
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: 'Lato'; }
h1 {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl { border: 3px solid #333; }
.accordion dl:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #007dff;
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #eee;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
margin: 0;
}
.accordion {
position: relative;
background-color: #eee;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle {
background-color: #666666;
border-bottom: 2px solid #007dff;
}
.accordionTitle:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover { background-color: #333; }
.accordionTitleActive { background-color: #333; }
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: hidden;
}
@media all {
.accordionItem {
max-height: 50em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItemCollapsed { max-height: 0; }
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
@-webkit-keyframes
accordionIn { 0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes
accordionIn { 0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes
accordionIn { 0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes
accordionOut { 0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes
accordionOut { 0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@keyframes
accordionOut { 0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}

<div class="container">
<h1>Hydroxal DarkRP Rules</h1>
<div class="css-script-ads" align="center"><script type="text/javascript"><!--
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="accordion">
<dl>
<dt><a class="accordionTitle" href="#">Basic Rules.</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Respect everyone. No threats, teasing or trolling.</p>
<p>There is no bunny hopping. It is unrealistic.</p>
<p>Body-blocking is highly annoying, don't do it.</p>
<p>Do not spam things. This includes your flashlight, props, lights, ropes and mic spam.</p>
<p>Do not impersonate other exsisting members</p>
</dd>
<dt><a href="#" class="accordionTitle">DarkRP Rules.</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>• Follow NLR (New Life Rule)</p>
<ul>
<p>This means you dont return to the point of death for 5 minutes and forget your past life.</p>
</ul>
<p>•Do not RDM (Random Deathmatch) You must have a valid reason to injure or kill someone.</p>
<p>• Do not metagame</p>
<li></li><li></li> <p>Eg. You can not kick the Thief out your store and leave the citizen purely based on the fact that he's a thief. This is metagame</p>
<p>• Follow your job description.</p>
<p>• Follow your Job description</p>
<li></li><li></li> <p>Eg. If your job description says "You must sell weapons to public," then do so.</p>
</dd>
<dt><a href="#" class="accordionTitle">Other.</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Props are for building only.</p>
<p>Do not abuse fading door.</p>
</dd>
</dl>
</div>
</div>
<script>
( function( window ) {
'use strict';
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
define( classie );
} else {
window.classie = classie;
}
})( window );
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
if(e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if(classes) {
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46156385-1', 'cssscript.com');
ga('send', 'pageview');
</script>
</body>
</html>
&#13;
答案 0 :(得分:0)
你有invalid
个html。 li
个元素应该有ul
个父元素。
您可以在此处验证:http://www.freeformatter.com/html-validator.html
试试这个:
(function(window) {
'use strict';
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ('classList' in document.documentElement) {
hasClass = function(elem, c) {
return elem.classList.contains(c);
};
addClass = function(elem, c) {
elem.classList.add(c);
};
removeClass = function(elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function(elem, c) {
return classReg(c).test(elem.className);
};
addClass = function(elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function(elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if (typeof define === 'function' && define.amd) {
define(classie);
} else {
window.classie = classie;
}
})(window);
var $ = function(selector) {
return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click", function(e) {
e.stopPropagation();
e.preventDefault();
if (e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if (classes) {
for (var x = 0; x < classes.length; x++) {
if (classes[x] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if (classie.has(content, 'accordionItemCollapsed')) {
if (classie.has(content, 'animateOut')) {
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
} else {
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});
&#13;
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato';
}
h1 {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl {
border: 3px solid #333;
}
.accordion dl:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #007dff;
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #eee;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
margin: 0;
}
.accordion {
position: relative;
background-color: #eee;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle {
background-color: #666666;
border-bottom: 2px solid #007dff;
}
.accordionTitle:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: #333;
}
.accordionTitleActive {
background-color: #333;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: hidden;
}
@media all {
.accordionItem {
max-height: 50em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItemCollapsed {
max-height: 0;
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes accordionIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
&#13;
<div class="container">
<h1>Hydroxal DarkRP Rules</h1>
<div class="accordion">
<dl>
<dt><a class="accordionTitle" href="#">Basic Rules.</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Respect everyone. No threats, teasing or trolling.</p>
<p>There is no bunny hopping. It is unrealistic.</p>
<p>Body-blocking is highly annoying, don't do it.</p>
<p>Do not spam things. This includes your flashlight, props, lights, ropes and mic spam.</p>
<p>Do not impersonate other exsisting members</p>
</dd>
<dt><a href="#" class="accordionTitle">DarkRP Rules.</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>• Follow NLR (New Life Rule)</p>
<ul>
<li>This means you dont return to the point of death for 5 minutes and forget your past life.</li>
<li>•Do not RDM (Random Deathmatch) You must have a valid reason to injure or kill someone.</li>
<li>• Do not metagame</li>
<li>Eg. You can not kick the Thief out your store and leave the citizen purely based on the fact that he's a thief. This is metagame</li>
<li>• Follow your job description.</li>
<li>• Follow your Job description</li>
<li>Eg. If your job description says "You must sell weapons to public," then do so.</li>
</ul>
</dd>
<dt><a href="#" class="accordionTitle">Other.</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Props are for building only.</p>
<p>Do not abuse fading door.</p>
</dd>
</dl>
</div>
</div>
&#13;