时间戳

首页 > 解决方案 > 在 URL 中单击时打开手风琴

html - 在 URL 中单击时打开手风琴

问题描述

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

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

标签： htmljqueryaccordion

解决方案

你可以试试下面的代码。从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>

推荐阅读