Geekly articles weekly

الأكورديون ، faq ، المفسد وغيرها من الحاجيات المنسدلة

الأكورديون و faq

يمكنك إنشاء الأكورديون ، faq ، المفسد وما شابه ذلك باستخدام Div و JavaScript.
لكن أفضل: تفاصيل وملخص

مدعوم من قبل جميع المتصفحات الحديثة وهذا رمز منسق بشكل صحيح ، والذي سيكون له مزايا:

  1. سيكون الأشخاص ذوو الإعاقة أسهل في استخدام موقعك! يفهم برنامجهم (قارئات الشاشة وما شابه ذلك) علامات html5 تمامًا وسيعمل على معالجتها بشكل صحيح وإبلاغ الناس بالمحتويات بشكل صحيح.
  2. سيتم تحسين تماسك النص ، وستتمكن محركات البحث من فهرسة الموقع بشكل أفضل ، حيث ستفهم بشكل أفضل مدى ارتباط النص المرئي والمخفى.
  3. سيكون متاحًا للتحكم في عناصر من لوحة المفاتيح والأجهزة الأخرى.
  4. يتم تقليل مقدار شفرة جافا سكريبت المراد تحميلها ، مما يزيد من سرعة تحميل الصفحة وسرعة المعالجة وصحتها.
  5. تحسين الأداء في Lighthouse و Google PageSpeed وأدوات أخرى مماثلة.
  6. إنه يعمل عندما يتم إيقاف تشغيل javascript.

أقل:

  1. لا تعرف المتصفحات القديمة هذه العلامات ولن تخفي المعلومات.

HTML:

<details> <summary>- </summary> <p>  —   </p> </details> <details open> <summary>-  2</summary> <p>        </p> </details> <details> <summary>-  3</summary> <p>  —   </p> </details>

مثال بسيط تفاصيل / ملخص

مظاهرة:


من ناحية ، لا تبدو جميلة ، ومن ناحية أخرى فهي محايدة ويمكن أن تتناسب بسهولة مع العديد من التصميمات. بالمناسبة ، طريقة العرض الافتراضية لعلامة "تفاصيل" تشبه إلى حد بعيد المفسد من "هابر" ، فقط تحتاج إلى إعادة رسمه قليلاً ، وتسطيره وتحصل على العلامة الصحيحة بشكل صحيح ، دون javascript و divs ، Habrosk spoiler.

المفسد من هبر

لسوء الحظ ، تحتوي العلامة الافتراضية على عيبين:

  1. المتصفحات القديمة لا ترى ذلك.
  2. لا تسمح متصفحات Webkit بتغيير رمز العلامة.

لهذا السبب ، يجب إخفاء العلامة الافتراضية وإنشاء العلامة الخاصة بك.


النظر في المثال الأول تفاصيل / ملخص مع علامة نص معدلة:

تفاصيل / ملخص مع علامة نص معدلة

CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; } summary:before { content: "+"; margin-right: .3em; } details[open] > summary:before { content: "–"; } summary ~ * { padding:0 1em 0 1em; } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; }

بالنسبة إلى العلامات الافتراضية التي نعرضها: لا شيء ، ونعرض بديلاً مع الملخص: قبل {content: "+"؛}

ملخص: التركيز - الحد باستخدام box-shadow ، يعد ذلك ضروريًا للوحة المفاتيح بحيث يكون العنصر النشط مرئيًا ويمكنك التنقل باستخدام مفتاح علامة التبويب وفتحه وإغلاقه بمسافة.

بالنسبة إلى علامة الملخص ، قمت بتعيين شاشة العرض: كتلة مضمّنة - وهذا لا يمتد إلى العرض الكامل وتكون الكلمات فقط قابلة للنقر وليس السطر بالكامل.

مظاهرة:


علامة النص على اليمين + نص بسيط وعلامة الرسوم المتحركة:

تفاصيل / ملخص - علامة النص على اليمين + الرسوم المتحركة بسيطة من النص وعلامة

CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; } summary:after { content: "+"; margin-left: .3em; display: inline-block; transition: transform .5s; } details[open] > summary:after { transform: scale(1,-1); } summary ~ * { padding:0 1em 0 1em; } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } details{ display:block; margin-bottom: .5rem; }

في المثال الجديد ، أستخدم الملخص: بعد العلامة بدلاً من الملخص: قبل ذلك ، بحيث يظهر على اليمين.

علامة الرسوم المتحركة باستخدام convert: scale (1، -1)؛

بالنسبة لجميع العناصر الموجودة بعد الملخص ، قمت بتعيين الرسوم المتحركة لمظهر سلس باستخدام الرسوم المتحركة: sweep .5s-easy-out-out؛

مظاهرة:


Svg marker + rotation animation:

تفاصيل / ملخص - svg marker + rotation animation

CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } / SVG + أكس، base64 في، PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") عدم تكرار summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; }

ملخص: من قبل كان يجب إعادة بنائه بجدية:

  1. وضع الموقف: مطلق ؛ اليسار: .3em ؛ أعلى: العرض: الارتفاع: 1 م ؛
  2. يجب تعيين علامة النص على اللون: شفاف ؛ وإلا سيكون مرئيا.
  3. نحن شنق الصورة باستخدام الخلفية.

من الضروري أيضًا تعيين المسافة البادئة اليسرى - الحاشية في الملخص إلى 1.5em حتى لا يتداخل النص والرمز مع بعضهما البعض.

حسنًا ، نضيف التحويل: rotateZ (90deg) لتحول جميل للسهم.

مظاهرة:


إذا كنا بحاجة إلى أيقونة svg على اليمين ، فعندئذ نحتاج إلى تغيير الملخص: قبل وضعه بدلاً من اليمين.

لملخص وضع الحشوة اليمنى: 1.5em ؛

تفاصيل / ملخص - علامة svg على اليمين + دوران الرسوم المتحركة

CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } / SVG + أكس، base64 في، PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") عدم تكرار summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; }

مظاهرة:


لنعد الآن أحد أكثر الأمثلة شيوعًا لإنشاء الأكورديون ، حيث سيكون هناك رمز على اليسار ، الخلفية ، الظلال ، الآثار:

الأكورديون - أيقونة على اليسار ، الخلفية ، الظلال ، الآثار

CSS:

 body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; } summary:before { top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding: 0 2em 10px 2em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } / SVG + أكس، base64 في، PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") عدم تكرار body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; } summary:before { top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding: 0 2em 10px 2em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); }

مظاهرة:


Svg علامة على السهم تأثير دوران مرآة + الأيمن:

الأكورديون - أيقونة على تأثير دوران المرآة اليمنى + السهم

CSS:

 body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; } summary:before { top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: scale(1,-1); } summary ~ * { padding: 0 1em 10px 1.4em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } / SVG + أكس، base64 في، PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4 =") عدم تكرار body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; } summary:before { top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: scale(1,-1); } summary ~ * { padding: 0 1em 10px 1.4em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); }

مظاهرة:


الآن يمكنك إنشاء الأكورديونات الجميلة والمفسدين و faq ، بدون جافا سكريبت ، في HTML5 و CSS النقي.

قبل إزالة المخطط التفصيلي ، فكر في 100 مرة كيف يمكنك استبداله حتى يتمكن الشخص من رؤية التركيز ويمكنه التنقل من لوحة المفاتيح أو الأجهزة الأخرى.

إذا كنت بحاجة إلى ذلك ، فعندما تفتح مفسدًا واحدًا ، والآخر قريبًا ، سيتعين عليك استخدام javascript ، فيما يلي أعطي مثالًا على رمز JS البسيط الذي سوف يحل هذه المشكلة.

جافا سكريبت:

 var details = document.querySelectorAll("details"); for(i=0;i<details.length;i++) { details[i].addEventListener("toggle", accordion); } function accordion(event) { if (!event.target.open) return; var details = event.target.parentNode.children; for(i=0;i<details.length;i++) { if (details[i].tagName != "DETAILS" || !details[i].hasAttribute('open') || event.target == details[i]) { continue; } details[i].removeAttribute("open"); } }

مظاهرة:


تفاصيل دعم الجدول بواسطة المتصفحات.

مع خالص التقدير ، خالق مصمم الهبوط لحسابهم الخاص CMS cPortfolio

Source: https://habr.com/ru/post/ar465623/

More articles:


All Articles