Question

我希望从导航菜单链接激活工作.jquery切换。我还希望页面同时滚动到打开的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>

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

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

但我希望研究主题链接转到并切换研究区域。我尝试将类.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

您只需要下面的代码，在您希望显示/隐藏的每个div上方添加一个带有.trigger类的按钮，它将切换它下面的div。这将创造一个手风琴。如果按钮不能在每个div的正上方切换，您可以为每个按钮添加一个data-toggle ='div name'，并使用该标签选择要切换的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
})

链接转到并打开切换div

1 个答案: