Jquery 从URL触发单击事件

我正在构建一个FAQ页面，需要jquery函数第二部分的帮助。 当你点击一个问题时，它会显示答案。 我还想做的是，当我链接到一个锚，也显示了问题的答案

脚本：

jQuery(function($) {
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
var hash = window.location.hash;
    $('.faq-title').find('a[href*='+ hash + ']').closest('h4').trigger('click');
})

<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q1"></a>1. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q2"></a>2. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q3"></a>3. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>

<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>1. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>2. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>3. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>

h4.faq-title {
    cursor: points;
    padding: 0 0 6px 0;
}
span {
    text-decoration: underline;
}
p {
    color: #808080;
}
div.faq-content {
    display: none;
}

jQuery(function ($) {
    var hash = window.location.hash;
    if (hash) {
        $(hash).closest("h4").trigger("click");
    }
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
})

Html:

jQuery(function($) {
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
var hash = window.location.hash;
    $('.faq-title').find('a[href*='+ hash + ']').closest('h4').trigger('click');
})

<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q1"></a>1. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q2"></a>2. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q3"></a>3. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>

<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>1. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>2. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>3. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>

h4.faq-title {
    cursor: points;
    padding: 0 0 6px 0;
}
span {
    text-decoration: underline;
}
p {
    color: #808080;
}
div.faq-content {
    display: none;
}

jQuery(function ($) {
    var hash = window.location.hash;
    if (hash) {
        $(hash).closest("h4").trigger("click");
    }
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
})

1.问题:
回答

2.问题:
回答

3.问题:
回答

我添加了CSS来清理HTML。基本上，只需检查是否存在散列（例如，

#q3

），如果存在，则触发附加到它的事件处理程序。在这种情况下，单击

#q3

HTML:

jQuery(function($) {
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
var hash = window.location.hash;
    $('.faq-title').find('a[href*='+ hash + ']').closest('h4').trigger('click');
})

<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q1"></a>1. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q2"></a>2. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q3"></a>3. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>

<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>1. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>2. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>3. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>

h4.faq-title {
    cursor: points;
    padding: 0 0 6px 0;
}
span {
    text-decoration: underline;
}
p {
    color: #808080;
}
div.faq-content {
    display: none;
}

jQuery(function ($) {
    var hash = window.location.hash;
    if (hash) {
        $(hash).closest("h4").trigger("click");
    }
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
})

JavaScript:

jQuery(function($) {
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
var hash = window.location.hash;
    $('.faq-title').find('a[href*='+ hash + ']').closest('h4').trigger('click');
})

<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q1"></a>1. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q2"></a>2. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>
<div class="faq">
    <h4 class="faq-title" style="cursor:pointer;padding:0 0 6px 0;"><a id="q3"></a>3. <span style="text-decoration:underline;">Question</span></h4>
    <div class="faq-content" style="display:none;"><p style="color: #808080;">Answer</p></div>
</div>

<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>1. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>2. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>
<div class="faq">
    <h4 class="faq-title">
        <a id="q1"></a>3. <span>Question</span>
    </h4>
    <div class="faq-content">
        <p>Answer</p>
    </div>
</div>

h4.faq-title {
    cursor: points;
    padding: 0 0 6px 0;
}
span {
    text-decoration: underline;
}
p {
    color: #808080;
}
div.faq-content {
    display: none;
}

jQuery(function ($) {
    var hash = window.location.hash;
    if (hash) {
        $(hash).closest("h4").trigger("click");
    }
    $('.faq-title').click(function () {
        $(this).siblings('.faq-content').slideToggle('fast');
    })
})

---

更改您的javascript：

.find(hash)

---

检查。

当您使用哈希URL修饰符链接到页面上的特定内容时，什么是链接到锚点的

。例如：www.url.com/page.html#q3想要回答第三个问题。然后检查页面加载，url中是否有哈希部分，如果有，触发显示相应答案的代码。使用多个答案组合使其工作。HTML保持原样，将脚本更新为：
jQuery（函数（$）{$（'.faq title'）。单击（函数（{$（this）.同级（'.faq content'）。slideToggle（'fast'）；}）var hash=location.hash；$（'.faq title'）。查找（hash）。最近（'h4'）。触发器（'click'）；}）
希望这对其他人有帮助。
window.location.hash
在您执行此操作时已经有一个hash，我还必须将
window.location.hash
更改为
location.hash