应通过单击 link 或锚点打开手风琴

Question

首先：抱歉我的英语不好！

有两个 link 具有不同的锚点，例如：

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

当有人点击其中一个 link 时，他会自动被网站和位置所吸引，他应该是。好

但是站点中有一个手风琴，并且没有显示文本。应通过单击带有锚点 2 的 link 来打开带有锚点 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 link 内容：

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

如何通过单击 link/anchor 打开手风琴。感谢您的帮助！

Answer 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

Answer 2

JavaScript 新增检查URL中的锚点并打开手风琴：

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

应通过单击 link 或锚点打开手风琴

Accordion should be open by clicking on link or anchor

anchor

jquery

accordion

hyperlink