在 URL 中单击时打开手风琴

Question

我手风琴这里是代码:

    <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");
  });

现在我希望这个 link #joinus/jr-software-engineer/ 用于打开选定的手风琴。就像如果我把 www.acc.com/#joinus/jr-software-engineer/ 给某人粘贴到浏览器 URL 并且如果他转到 link 相应 link 的手风琴将自动打开而无需单击手风琴本身。如何使用 jQuery 和当前代码实现此目的。

Answer 1

您可以试试下面的代码。从 window.location.hash 获取散列 url。使用散列 URL 找到具有此散列 URL 的锚标记。将首字母 class 添加到手风琴容器中，使其显示 none.

<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>

在 URL 中单击时打开手风琴

Open accordion when clicked in the URL

html

jquery

accordion