|
|
| 第9行： |
第9行： |
| | == Animated {{tl|Hidebox}}? == | | == Animated {{tl|Hidebox}}? == |
| | | | |
| − | {{MywikiParaHack|<html><details class="lnnblog-hidebox </html><html>" </html><html>> | + | {{hidebox|hidebox|Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum! |
| − | <summary class="lnnblog-hidebox-heading" role=button </html><html>></html>hidebox<html></summary></html>}}
| + | |
| − | <div class="lnnblog-hidebox-body">
| + | |
| − | | + | |
| − | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum! | + | |
| | | | |
| | abixavxaubxibxsvuxvwuvuvduwvxuvduwvdduwyvxiebxownsoqnziwbxvuwzvywczyvzqinoqnziavzuavzyqvbzqiabzauyavxanxonceibxayvzunxownzibxuvwxuxboajxoanxiabxiwbxiwcbccnwoxbiwcbivneocncwoz | | abixavxaubxibxsvuxvwuvuvduwvxuvduwvdduwyvxiebxownsoqnziwbxvuwzvywczyvzqinoqnziavzuavzyqvbzqiabzauyavxanxonceibxayvzunxownzibxuvwxuxboajxoanxiabxiwbxiwcbccnwoxbiwcbivneocncwoz |
| − | | + | }} |
| − | </div>
| + | |
| − | {{MywikiParaHack|<html></details></html>}}
| + | |
| − | | + | |
| − | {{MywikiParaHack|<html><style>
| + | |
| − | .lnnblog-hidebox {
| + | |
| − | max-width: 100%;
| + | |
| − | }
| + | |
| − | .lnnblog-hidebox[data-lnnblog-hidebox-state="expand"] {
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | .lnnblog-hidebox-heading {
| + | |
| − | list-style: none;
| + | |
| − | position: relative;
| + | |
| − | padding-left: 1.2rem;
| + | |
| − | }
| + | |
| − | .lnnblog-hidebox-heading::-webkit-details-marker { display: none }
| + | |
| − | .lnnblog-hidebox-heading::before {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0.4rem;
| + | |
| − | margin: auto;
| + | |
| − | height: 0;
| + | |
| − | border: 0.3rem solid transparent;
| + | |
| − | border-left-width: 0.5rem;
| + | |
| − | border-left-color: currentColor;
| + | |
| − | transform: rotate(0);
| + | |
| − | transform-origin: 0.25rem 50%;
| + | |
| − | transition: 250ms transform;
| + | |
| − | }
| + | |
| − | .lnnblog-hidebox[open]:not([data-lnnblog-hidebox-state]) > .lnnblog-hidebox-heading::before,
| + | |
| − | .lnnblog-hidebox[data-lnnblog-hidebox-state="expand"] > .lnnblog-hidebox-heading::before {
| + | |
| − | transform: rotate(90deg);
| + | |
| − | }
| + | |
| − | .lnnblog-hidebox-body {
| + | |
| − | overflow-wrap: break-word;
| + | |
| − | }
| + | |
| − | </style><script>
| + | |
| − | var animationDuration = 250
| + | |
| − | | + | |
| − | $( "#bodyContent" ).on( "click", ".lnnblog-hidebox-heading", function ( event ) {
| + | |
| − | var $this = $( this )
| + | |
| − | var $parent = $this.parent()
| + | |
| − | var $body = $this.nextAll( ".lnnblog-hidebox-body" )
| + | |
| − | | + | |
| − | var open = $parent.prop( "open" )
| + | |
| − | var state = $parent.attr( "data-lnnblog-hidebox-state" )
| + | |
| − | | + | |
| − | if ( !open || state === "shrink" ) {
| + | |
| − | event.preventDefault()
| + | |
| − | var currentWidth = $parent.width()
| + | |
| − | var currentHeight = $parent.height()
| + | |
| − | $parent.stop( true, true ).prop( "open", true )
| + | |
| − | var targetWidth = $parent.width()
| + | |
| − | var targetHeight = $parent.height()
| + | |
| − | | + | |
| − | $body.outerWidth( targetWidth )
| + | |
| − | $parent
| + | |
| − | .attr( "data-lnnblog-hidebox-state", "expand" )
| + | |
| − | .width( currentWidth )
| + | |
| − | .height( currentHeight )
| + | |
| − | $parent.animate( {
| + | |
| − | width: targetWidth,
| + | |
| − | height: targetHeight
| + | |
| − | }, {
| + | |
| − | duration: animationDuration,
| + | |
| − | done: function () {
| + | |
| − | $body.css( "width", "" )
| + | |
| − | $parent
| + | |
| − | .css( {
| + | |
| − | width: "",
| + | |
| − | height: ""
| + | |
| − | } )
| + | |
| − | .removeAttr( "data-lnnblog-hidebox-state" )
| + | |
| − | }
| + | |
| − | } )
| + | |
| − | } else if ( open || state === "expand" ) {
| + | |
| − | event.preventDefault()
| + | |
| − | var currentWidth = $parent.width()
| + | |
| − | var currentHeight = $parent.height()
| + | |
| − | $parent.stop( true, true ).prop( "open", false )
| + | |
| − | var targetWidth = $parent.width()
| + | |
| − | var targetHeight = $parent.height()
| + | |
| − | | + | |
| − | state === "expand" || $body.outerWidth( currentWidth )
| + | |
| − | $parent
| + | |
| − | .attr( "data-lnnblog-hidebox-state", "shrink" )
| + | |
| − | .width( currentWidth )
| + | |
| − | .height( currentHeight )
| + | |
| − | .prop( "open", true )
| + | |
| − | .animate( {
| + | |
| − | width: targetWidth,
| + | |
| − | height: targetHeight
| + | |
| − | }, {
| + | |
| − | duration: animationDuration,
| + | |
| − | done: function () {
| + | |
| − | $body.css( "width", "" )
| + | |
| − | $parent
| + | |
| − | .css( {
| + | |
| − | width: "",
| + | |
| − | height: ""
| + | |
| − | } )
| + | |
| − | .prop( "open", false )
| + | |
| − | .removeAttr( "data-lnnblog-hidebox-state" )
| + | |
| − | }
| + | |
| − | } )
| + | |
| − | }
| + | |
| − | })
| + | |
| − | </script></html>}}
| + | |
hidebox
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
abixavxaubxibxsvuxvwuvuvduwvxuvduwvdduwyvxiebxownsoqnziwbxvuwzvywczyvzqinoqnziavzuavzyqvbzqiabzauyavxanxonceibxayvzunxownzibxuvwxuxboajxoanxiabxiwbxiwcbccnwoxbiwcbivneocncwoz
