在 URL 中单击时打开手风琴答案

【问题标题】：Open accordion when clicked in the URL在 URL 中单击时打开手风琴
【发布时间】：2020-05-05 12:31:07
【问题描述】：

我有一个手风琴这里是代码：

    <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 和当前代码来实现这一点。

【问题讨论】：

标签： html jquery accordion

【解决方案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>

【讨论】：

你能解释一下为什么你添加了 display none css 吗？
如果 URL 存在 hash(#)，如果您想在页面加载时显示它打开，我们需要隐藏手风琴容器。我已经更新了代码。请检查。
这工作正常。非常感谢。你是救世主。
你能帮我解决这个问题吗？ stackoverflow.com/questions/61627453/… 提前致谢。