帮助:沙盒：修订间差异

2022年11月22日 (二) 11:16的版本

lnncrypt

              ．    ．   ，       ，“”！！（

Animated {{Hidebox}}?

hidebox

@@ 第9行： / 第9行： @@
 == Animated {{tl|Hidebox}}? ==
-{{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!
+{{hidebox|hidebox|一二三四五，上山打老虎。}}
-abixavxaubxibxsvuxvwuvuvduwvxuvduwvdduwyvxiebxownsoqnziwbxvuwzvywczyvzqinoqnziavzuavzyqvbzqiabzauyavxanxonceibxayvzunxownzibxuvwxuxboajxoanxiabxiwbxiwcbccnwoxbiwcbivneocncwoz
+{{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
+$( ".lnnblog-hidebox-heading" ).on( "click", 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" + 1 )
+    var targetWidth = $parent.width()
+    var targetHeight = $parent.height()
+    $body.outerWidth( targetWidth, true )
+    $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 )
+    $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>}}