Открыть аккордеон при щелчке по URL-адресу - PullRequest
Новая
       17

Открыть аккордеон при щелчке по URL-адресу

0 голосов
/ 05 мая 2020

У меня есть аккордеон, вот код: 

    <div class="accordion">
            <div class="accordion-title accordion-area">
              <a href="#joinus/jr-software-engineer/" id="accordion-link">Junior Software Engineer</a>
            </div>
            <div class="accordion-container">This is the Body</div>
            <div class="accordion-title accordion-area">
              <a href="#joinus/sr-software-engineer/" id="accordion-link">Senior Software Engineer</a>
            </div>
            <div class="accordion-container">This is the Body</div>
            <div class="accordion-title accordion-area">
              <a href="#joinus/software-engineer-intern/" id="accordion-link">Intern Software Engineer</a>
            </div>
            <div class="accordion-container">This is the Body</div>
    </div>

А код jQuery - это открыть и закрыть аккордеон

/ * Анимация аккордеона при нажатии * / 

$(".accordion-title").click(function () {
    $(this).toggleClass("active");
    $(".accordion-title").not($(this)).removeClass("active");
    $(this).next().slideToggle("fast");
    $(".accordion-container").not($(this).next()).slideUp("fast");
  });

Теперь я хочу, чтобы эта ссылка #joinus/jr-software-engineer/ использовалась для открытия выбранного аккордеона. Например, если я дам кому-то www.acc.com/#joinus/jr-software-engineer/, чтобы он вставил URL-адрес браузера, и если он перейдет по ссылке, соответствующая ссылка откроется автоматически без нажатия на саму аккордеон. Как я могу добиться этого, используя jQuery и текущий код.

1 Ответ

1 голос
/ 05 мая 2020

Вы можете попробовать следующий код. Получите ha sh url из window.location.ha sh. Используя URL-адрес ha sh, найдите тег привязки с этим URL-адресом ha sh. Добавлен начальный класс в контейнер аккордеона, чтобы они не отображали ничего. 

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
   <script>
        $(document).ready(function () {
            $(".accordion-title").click(function () {
                $(this).toggleClass("active");
                $(".accordion-title").not($(this)).removeClass("active");
                $(this).next().slideToggle("fast");
                $(".accordion-container").not($(this).next()).slideUp("fast");
            });

            // get document location hash URL

            var urlHash= document.location.hash;
            if (urlHash) {
                $(".accordion-container").hide();
                var accordionLink = $("a[href='"+urlHash+"']");

                if (accordionLink && accordionLink.length > 0) {
                    accordionLink.closest('.accordion-title').trigger('click');
                }
            }

        })
    </script>
</head>

<body>
    <div class="accordion">
        <div class="accordion-title accordion-area">
            <a href="#joinus/jr-software-engineer/" id="accordion-link">Junior Software Engineer</a>
        </div>
        <div class="accordion-container">This is the Body</div>
        <div class="accordion-title accordion-area">
            <a href="#joinus/sr-software-engineer/" id="accordion-link">Senior Software Engineer</a>
        </div>
        <div class="accordion-container">This is the Body</div>
        <div class="accordion-title accordion-area">
            <a href="#joinus/software-engineer-intern/" id="accordion-link">Intern Software Engineer</a>
        </div>
        <div class="accordion-container">This is the Body</div>
    </div>
</body>

</html>
...