|
|
| 第6行： |
第6行： |
| ． ． ， ，“”！！（ | | ． ． ， ，“”！！（ |
| }} | | }} |
|
| |
| == Animated {{tl|Hidebox}}? ==
| |
|
| |
| {{MywikiParaHack|<html><details class="lnnblog-box </html><html>" </html><html>>
| |
| <summary class="lnnblog-box-heading" role=button </html><html>></html>hidebox<html></summary></html>}}
| |
| <div class="lnnblog-box-body">
| |
| 一二三四五，上山打老虎。
| |
| </div>
| |
| {{MywikiParaHack|<html></details></html>}}
| |
|
| |
| {{MywikiParaHack|<html><style>
| |
| .lnnblog-box {
| |
| max-width: 100%;
| |
| }
| |
| .lnnblog-box[data-lnnblog-hidebox-state="expand"] {
| |
| overflow: hidden;
| |
| }
| |
| .lnnblog-box-heading {
| |
| list-style: none;
| |
| position: relative;
| |
| padding-left: 1.2rem;
| |
| }
| |
| .lnnblog-box-heading::-webkit-details-marker { display: none }
| |
| .lnnblog-box-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(0deg);
| |
| transform-origin: 0.25rem 50%;
| |
| }
| |
| .lnnblog-box[open] > .lnnblog-box-heading::before {
| |
| transform: rotate(90deg);
| |
| }
| |
| .lnnblog-box[data-lnnblog-hidebox-state="expand"] > .lnnblog-box-heading::before {
| |
| animation: expand 250ms;
| |
| }
| |
| .lnnblog-box[data-lnnblog-hidebox-state="shrink"] > .lnnblog-box-heading::before {
| |
| transform: rotate(0);
| |
| animation: shrink 250ms;
| |
| }
| |
| @keyframes expand {
| |
| from { transform: rotate(0deg); }
| |
| to { transform: rotate(90deg); }
| |
| }
| |
| @keyframes shrink {
| |
| from { transform: rotate(90deg); }
| |
| to { transform: rotate(0deg); }
| |
| }
| |
| </style><script>
| |
| var animationDuration = 250
| |
|
| |
| $( ".lnnblog-box-heading" ).on( "click", function ( event ) {
| |
| var $this = $( this )
| |
| var $parent = $this.parent()
| |
| var $body = $this.nextAll( ".lnnblog-box-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 + 1 )
| |
| $this.addClass( "lnnblog-hidebox-heading-open" )
| |
| $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 + 1 )
| |
| $this.removeClass( "lnnblog-hidebox-heading-open" )
| |
| $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" )
| |
| }
| |
| } )
| |
| }
| |
| //return false
| |
| })
| |
| </script></html>}}
| |
lnncrypt
． ． ， ，“”！！（
_icon.png
){kind=icon}
_wordmark.png)