Question

我正在使用一些jQuery来扩展/隐藏一些div。我需要添加一个事件处理程序，以便在单击链接时，它会打开一个相应的div。每个切换的div将分配一个唯一的类。我正在寻找有关如何构建事件处理程序的一些建议。

jQuery

$(document).ready(function(){

$(".toggle_container:not(:first)").hide(); 
$(".toggle_container:first").show();
$("h6.trigger:first").addClass("active");

$("h6.trigger").click(function(){
  $(this).toggleClass("active");
  $(this).next(".toggle_container").slideToggle(300);
});

css：

// uses a background image with an on (+) and off (-) state stacked on top of each other 
h6.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;} 
h6.trigger a {color: #fff;text-decoration: none; display: block;} 
h6.active {background-position: left bottom;} 
.toggle_container { overflow: hidden; } 
.toggle_container .block {padding: 20px;}

html有一个链接列表，例如：

<a href="#">One</a>
<a href="#">Two</a>

和相关的div打开：

<h6 class="trigger">Container one</h6> 
<div class="toggle_container">
div one
</div>

<h6 class="trigger">Container two</h6> 
<div class="toggle_container Open">
div one
</div>

正如我所提到的，我将指派一个独特的课程来促进这一点。

有什么建议吗？谢谢！

为了澄清，我正在寻找一些建议来构建一个事件处理程序，以便在从页面的不同部分点击链接时切换打开特定的div，例如从导航中点击。

Answer 1

您可以触发特定标题的点击事件，如下所示：

<h6 class="trigger" id="myHeader">Container two</h6> 
<div class="toggle_container Open">
div one
</div>


$('#myHeader').click();

如果容器已经打开，这将隐藏容器;为了防止这种情况，将其改为

$('#myHeader:not(.active)').click();

（如果标题已经是.active，则选择器将不匹配任何元素，并且不会发生任何事情）

Answer 2

我会像这样布置你的元素:(更喜欢使用ID而不是使用唯一的类）

<a class="toggler" href="#div1">Click</div>
<a class="toggler" href="#div2">Click</div>
<div class="toggle-container" id="div1">
 Hello
</div>
<div class="toggle-container" id="div2">
 Hello
</div>

然后JS将是：

$('div.toggle-container').hide().first().show().addClass('active');
$('a.toggler').bind('click', function (e) {
   var href = $(this).attr('href');
   $('div.active').hide().removeClass('active');
   $(href.slice(href.indexOf("#"))).show().addClass('active');

   event.preventDefault();
});

如果您肯定想要使用唯一的类，请修改选择器：

$("." + href.slice(href.indexOf("#") + 1)).show().addClass('active');

添加jQuery事件处理程序以在单击链接时展开div

2 个答案: