Question

我正在使用Sohtanaka的jQuery切换效果来“显示”和“隐藏”内容。

这是jQuery：

$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
});

});

这是我的HTML：

<h2 class="trigger"><a href="#test1">Test 1</a></h2>
 <div class="toggle_container">
  <div class="block">
    <h3>Content Header</h3>
    <p>content</p>
  </div>
 </div>

<h2 class="trigger"><a href="#test2">Test 2</a></h2>
 <div class="toggle_container">
  <div class="block">
    <h3>Content Header</h3>
    <p>content</p>
  </div>
 </div>

<h2 class="trigger"><a href="#test3">Test 3</a></h2>
 <div class="toggle_container">
  <div class="block">
    <h3>Content Header</h3>
    <p>content</p>
  </div>
 </div>

一切都按预期工作。

我想知道需要修改哪些内容，以便在相应的锚点位于网址末尾时显示特定的容器？

e.g。如果我的网址是“www.domain.com/content/#test2”，我希望显示容器“测试2”，并且“测试1”和“测试3”保持隐藏状态。

非常感谢。

Answer 1

您应该可以将此功能添加到您的代码中，如下所示：

$(document).ready(function() {
    $(".toggle_container").hide();
    $("h2.trigger").click(function() {
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

    $("a[href='" + window.location.hash + "']").parent(".trigger").click();
});

Answer 2

当网址为#test2时，window.location.hash将保留值http://www.domain.com/content/#test2。这是您应该在jQuery属性选择器中使用的，用于在ready处理程序中找到<a>元素：

$(document).ready(function() {
    ...

    if (window.location.hash) {
        $('h2.trigger + .toggle_container').hide(); // Hide all...
        $('h2.trigger').has("a[href='" + window.location.hash + "']").next('.toggle_container').show(); // ... but show one
    }
});

（Demo。必然存在更优雅的实现。）

<强>更新
我的第一个答案在很多方面都是错误的：-S

Answer 3

$(document).ready(function() {
    $('a').each(function() {
        if($(this).attr('href') == window.location.hash) {
            $(this).parent(".trigger").click();
        }
    });
);

jQuery Toggle＆amp;锚点链接

3 个答案: