FAQ по аккордеонному стилю с двумя уровнями - PullRequest
Новая
       8

FAQ по аккордеонному стилю с двумя уровнями

0 голосов
/ 21 января 2020

Я использую Squarespace для создания своего сайта, так как я начинающий программист. Я нашел в Интернете некоторый код для реализации часто задаваемых вопросов по аккордеонному стилю. У меня этот код введен в заголовок страницы. Затем я поместил содержание FAQ в блок уценки и использовал нотацию ### уценки для заголовков h3 и #### для заголовков h4. Таким образом, у меня есть два типа заголовков в моем FAQ по разметке, которые затем нацелены в код javascript, чтобы свернуть по умолчанию и развернуть, чтобы при щелчке отобразить сопроводительный абзац.

Сначала я использовал только заголовки h4 и приведенный ниже код. Это работает гладко, как вы можете видеть на этой веб-странице. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h4').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
    $(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h4").slideToggle();});
    });
    </script>

На другой странице, однако, мне нужно два уровня, чтобы свернуть по умолчанию. Поэтому я решил, что просто добавил тот же код, но заменил h4 на h3. Это дает код ниже. К сожалению, это не работает, как вы можете видеть на этой странице (пункт +2.). Весь текст отображается по умолчанию, а заголовки h4 (+2.1, +2.2, ...) исчезают. Когда я щелкаю h3 (+2 ...), внезапно появляются заголовки h4.

Я хочу показывать только заголовки h3 по умолчанию. Когда кто-то нажимает на него, в абзаце ниже должен отображаться заголовок h4. Если есть заголовки h4, эти заголовки должны показываться свернутыми в первую очередь, и только когда кто-то нажимает на них, должен показываться сопроводительный абзац. Поэтому я хочу два уровня заголовков, которые можно полностью свернуть и развернуть, щелкнув по ним.

Что я должен изменить в приведенном ниже коде, чтобы сделать это? 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $('.markdown-block .sqs-block-content h4').css('cursor','pointer');
        $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
        $(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h4").slideToggle();});
        });
        </script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
        $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
        $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
        });
        </script>
...