diff --git a/include/functions.php b/include/functions.php index 796e155b..df4a6c02 100644 --- a/include/functions.php +++ b/include/functions.php @@ -304,13 +304,13 @@ function formatSpoiler($content, $title = '', $defaultCollapsed = true): string $title = $lang_functions['spoiler_default_title']; } // $content = str_replace(['
', '
'], '', $content); - $contentClass = "spoiler-content"; + $contentClass = ""; if ($defaultCollapsed) { - $contentClass .= " collapse"; + $contentClass .= " open"; } $HTML = sprintf( - '
%s
%s
', - $lang_functions['spoiler_expand_collapse'], $title, $contentClass, $content + '%s%s', + $contentClass, $title, $content ); return addTempCode($HTML); } diff --git a/public/js/nexus.js b/public/js/nexus.js index 453bd826..c4ea6628 100644 --- a/public/js/nexus.js +++ b/public/js/nexus.js @@ -1,13 +1,4 @@ jQuery(document).ready(function () { - jQuery('.spoiler-title').on('click', function () { - let content = jQuery(this).parent().next(); - if (content.hasClass('collapse')) { - content.height(content[0].scrollHeight).removeClass('collapse') - } else { - content.height(0).addClass('collapse') - } - }) - function getImgPosition(e, imgEle) { // console.log(e, imgEle) let imgWidth = imgEle.prop('naturalWidth') diff --git a/public/styles/nexus.css b/public/styles/nexus.css index be62367b..f10628af 100644 --- a/public/styles/nexus.css +++ b/public/styles/nexus.css @@ -4,20 +4,18 @@ img.hitandrun { background: url(icons.gif) no-repeat -100px -171px; margin-left: 0.5em; } -.spoiler-title { +details summary { + width: fit-content; line-height: 28px; color: #4d6c99; cursor: pointer; font-weight: 700; background-color: rgba(77, 108, 153, 0.1); - display: inline-block; padding: 0 10px; + transition: margin .15s ease-out; } -.spoiler-content { - display: inline-block; - height: 0; - overflow: hidden; - transition: height 0.3s ease; +details[open] summary { + margin-bottom: 10px; } .layui-layer { color: black;