如何用锚切换jquery

问题描述

| 我有一个小问题的jQuery。 情况： 我有一段jQuery代码，在这里切换结果。 JS代码：

//Set default open/close settings
$(\'.acc_container\').hide(); //Hide/close all containers
//$(\'.acc_trigger:first\').addClass(\'active\').next().show(); //Add \"active\" class to first trigger,then show/open the immediate next container

//On Click
$(\'.acc_trigger\').click(function(){
    if( $(this).next().is(\':hidden\') ) { //If immediate next container is closed...
        $(\'.acc_trigger\').removeClass(\'active\').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass(\'active\').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return true; //Prevent the browser jump to the link anchor
});

现在我要打开-从URL切换锚点位置的项目，例如（

http://x.com/page.php#toggleItem2

） 题： 如何从URL中读取toggleItem2并完全打开此部分？ 额外： HTML代码：

<div class=\"container\">
    <h2 class=\"acc_trigger\"><a href=\"#toggle1\">Item1</a></h2>
    <div class=\"acc_container\">
        <div class=\"block\">
            Inner Text in toggle 1
        </div>
    </div>

    <h2 class=\"acc_trigger\"><a href=\"#toggle2\">Item2</a></h2>
    <div class=\"acc_container\">
        <div class=\"block\">
            Inner Text in toggle 2
        </div>
    </div>


    <h2 class=\"acc_trigger\"><a href=\"#toggle3\">Item3</a></h2>
    <div class=\"acc_container\">
        <div class=\"block\">
            Inner Text in toggle 3
        </div>
    </div>

</div>

我希望这个问题已明确定义。 提前致谢。     

解决方法

        您应根据锚点给您3个ID，例如

<h2 class=\"acc_trigger\"><a href=\"#toggle1\">Item1</a></h2>
<div id=\"toggle1\" class=\"acc_container\">
    <div class=\"block\">
        Inner Text in toggle 1
    </div>
</div>

您可以从“ 5”对象获得文档片段：

document.location.hash

然后就是简单的（假设其他容器都被隐藏了）：

$(document.location.hash).slideDown().prev().addClass(\'active\');

    ,        尝试jQuery本身切换 http://api.jquery.com/toggle/     ,        这被保存在“ 8”变量中。     ,        您可以执行以下操作： http://jsfiddle.net/b6Znw/ Javascript：

$().ready(function(){
    $(\'.acc_trigger a\').click(function(){
        $(this).closest(\'.acc_trigger\').next(\'.acc_container\').toggle()
        return false;   
    })
})