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

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

Answer 1

您可以尝试以下代码。从 window.location.hash 获取哈希URL。使用哈希URL查找具有该哈希URL的锚标记。向手风琴容器添加了初始类，以使其不显示任何内容。

<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时打开手风琴

1 个答案: