通过单击另一个类来切换类的可见性
我正在开展一个项目,我需要能够点击.node-202 .field-name-field-pin-point
并切换.node-202 .group-dealer
的可见性。
我在呼叫中需要两个标识符,因为会有多个节点,并且当我单击其中一个针点时,我不希望所有节点都打开。
编辑:这是一个HTML的例子。 我使用的是Drupal,因此存在大量不必要的代码,但尽可能快地对其进行格式化。
<article class="node-202 node node-dealer node-teaser contextual-links-region node-by-viewer clearfix">
<div class="field-group-format field-group-div group-dealer collapsible speed-fast effect-none"><!-- Begin Class Group Dealer -->
<h3><span class="field-group-format-toggler">Dealer Container</span></h3>
<div class="field-group-format-wrapper" style="display: block;">
<div class="field field-name-field-dealer-image field-type-image field-label-hidden"><div class="field-items">
<div class="field-item even"><img src="image.jpg" width="280" height="114" alt="" />
</div>
</div>
</div>
<div class="field field-name-field-dealer-website field-type-link-field field-label-hidden">
<div class="field-items">
<div class="field-item even">
<a href="@" target="_blank">Company Titile</a>
</div>
</div>
</div>
<div class="field field-name-field-dealer-address field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">81234 Ricardo Court
</div>
</div>
</div>
<div class="field field-name-field-dealer-location field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">Los Angeles, CA
</div>
</div>
</div>
<div class="field field-name-field-dealer-country field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">United States
</div>
</div>
</div>
<div class="field field-name-field-dealer-phone-number field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">123-555-2042
</div>
</div>
</div>
<div class="field field-name-field-dealer-email field-type-email field-label-hidden">
<div class="field-items">
<div class="field-item even">
<a href="mailto:sales@company.com">sales@company.com</a>
</div>
</div>
</div>
</div>
</div> <!-- END CLASS GROUP DEALER -->
<div class="field field-name-field-pin-point field-type-image field-label-hidden">
<div class="field-items"><div class="field-item even">
<img src="image.png" width="24" height="23" alt="" />
</div>
</div>
</div>
</article>
编辑2:我需要设置“.node-202 .group-dealer”为可见性:隐藏而不是显示:无。 看起来这可能是有帮助的:jQuery .hide()设置可见性的等价物:hidden。
假设HTML结构看起来像这样(并且你有这个结构的多个实例,所以你不能只使用类名):
<div class="node-202">
<div class="field-name-field-pin-point">...</div>
<div class="group-dealer">...</div>
</div>
你需要这样的东西:
$('.node-202 .field-name-field-pin-point').click(function() {
$(this).siblings('.group-dealer').toggle();
});
在JSFIDDLE中测试
尝试这个..
$('.node-202 .field-name-field-pin-point').bind('click', function(){
$('.node-202 .group-dealer').toggle();
})
FIDDLE DEMO
链接地址: http://www.djcxy.com/p/83561.html