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

时间:2016-04-19 09:05:56

标签: jquery hyperlink anchor accordion

第一:抱歉我的英文不好!

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

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

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

2 个答案:

答案 0 :(得分:0)

你错过了你必须首先隐藏元素,所以他们不显示。您可以使用$("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

答案 1 :(得分:0)

添加JavaScript以检查URL中的锚点并打开手风琴:

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