手风琴应通过点击链接或锚点打开答案

【问题标题】：Accordion should be open by clicking on link or anchor手风琴应通过点击链接或锚点打开
【发布时间】：2016-08-11 08:30:01
【问题描述】：

首先：对不起我的英语不好！

例如有两个不同锚点的链接：

<a href="www.test.ch?name=example#anchor1">
<a href="www.test.ch?name=example#anchor2">

当有人点击这些链接之一时，他会自动被站点和位置所吸引，他应该是。很好。

但是在站点中有一个手风琴并且没有显示文本。通过单击带有锚点 2 的链接，应打开带有锚点 2 的位置。

这是 jquery：

<script>        
        $().ready(function() {
            $(".accordeon .ancor").click(function() {
                var textContainer = $(this).parent().children(".text");
                if (textContainer.is(":visible")) {
                    textContainer.slideUp();
                    $(this).attr("src", "images/accordon_open.jpg");
                }
                else {
                    textContainer.slideDown();
                    $(this).attr("src", "images/accordon_close.jpg");
                }
            });

            $(".accordeon .text").hide();

        });
    </script>

以及链接内容的html：

<div class="accordeon">
    <img class="ancor button" src="images/accordon_open.jpg">
    <div class="title ancor">
            Titel anchor 1
    </div>
    <div class="text">
        <a name="anchor1"></a>
        text anchor1 (should be not visible)
    </div>
</div>

<div class="accordeon">
    <img class="ancor button" src="images/accordon_open.jpg">
    <div class="title ancor">
            Titel anchor 2
    </div>
    <div class="text">
        <a name="anchor2"></a>
        text anchor2 (should be visible, because someone had click the link for it)
    </div>
</div>

如何通过单击链接/锚点打开手风琴。感谢您的帮助！

【问题讨论】：

标签： jquery hyperlink anchor accordion

【解决方案1】：

你只是错过了你必须先隐藏元素，这样它们就不会显示出来。你可以使用$("div.text").hide();

 $().ready(function() {
       $("div.text").hide();
        $(".accordeon .ancor").click(function() {
            var textContainer = $(this).parent().children(".text");
            if (textContainer.is(":visible")) {
                textContainer.slideUp();
                $(this).attr("src", "images/accordon_open.jpg");
            }
            else {
                textContainer.slideDown();
                $(this).attr("src", "images/accordon_close.jpg");
            }
        });

        $(".accordeon .text").hide();

    });

这里是fiddle

【讨论】：

感谢您的回答。那不是我的问题。手风琴效果很好，当您第一次访问该站点时，文本会被隐藏。但是如何通过单击带有锚点的链接来打开手风琴呢？有几个链接，每个链接都属于一个手风琴，应该通过点击打开。
我仍然不确定我是否理解问题所在。您只需要第一次自动点击手风琴？如果是这样，只需使用 jquery trigger('click') 事件
是的，点击标题或图片可以正常工作。它上下滑动。但是我有一个外部链接，然后应该打开几个手风琴中的一个。当您单击另一个链接时，将打开另一个手风琴。此外部链接与手风琴不在同一页面上。当某人单击该链接时，它会打开一个新站点，例如第三个手风琴应该已经打开。其他都关门了。如何使用外部链接打开某个面板？
在外部链接的href中传递一个额外的参数 --> www.link.com/foo?accordionToOpen=1
如何在jquery中连接这个参数？链接看起来像 -> www.link.com?name=example#anchor1

【解决方案2】：

用于检查 URL 中的锚点并打开手风琴的 JavaScript 添加：

if(window.location.hash){
   $(window.location.hash + ".accordeon .text").show();
   $(window.location.hash + ".accordeon img").attr("src","images/accordon_close.jpg");
}

【讨论】：