Link 转到并打开开关 div

Question

我想要一个可以工作的 .jquery 开关，可以从导航菜单 link 中激活。我还希望页面同时滚动到打开的div。这是有效的：

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

});

用这个 HTML:

<h4 class="trigger3 dark_grey">
<a href="#">Research Themes</a></h4>
<div class="toggle_container3" id="research"> content </div>

此菜单 link 转到页面上的研究主题部分：

<li><a href="#research">Research Themes</a></li>

但我希望研究主题 link 转到并打开研究 div。我尝试将 class .trigger3 添加到，但没有成功。 #research 停止工作。在这个论坛上研究之后，我尝试了：

$('#research').click(function (e) {
e.preventDefault();
$(this).toggleClass("").next().slideToggle("slow");
    return false;
window.location.hash = ($(e.currentTarget).attr("href"));
});

但运气不好。有没有我可以添加到原始 .trigger3 点击功能的东西，这将使它也能与一起使用？另外转到页面上的那个位置？

Answer 1

您只需要下面的代码，在您希望 show/hide 的每个 div 上方添加一个带有 class .trigger 的按钮，它将切换下面的 div它。这将创建一个手风琴。如果按钮不能在每个 div 的正上方进行切换，您可以向每个按钮添加一个 data-toggle='div name' 并使用该标签对 select 和 div 进行切换。

$(".trigger").click(function(){
    $(this).next().slideToggle("slow"); // toggle div below button
    $('.' + $(this).data('toggle')).slideToggle('slow'); // toggle div specified in data-toggle attribute on trigger element
    return false; //Prevent the browser jump to the link anchor
})

Link 转到并打开开关 div

Link to go to and open toggle div

jquery

toggle

slidetoggle

toggleclass