通过单击另一个班级来切换班级可见性 [英] Toggle Class Visibility by Clicking on another Class
问题描述
我正在一个项目上，我需要能够单击.node-202 .field-name-field-pin-point并切换.node-202 .group-dealer的可见性.
I am working on a project and I need to be able to click .node-202 .field-name-field-pin-point and toggle the visibility of .node-202 .group-dealer.
在通话中我需要两个标识符，因为将有多个节点，并且我不希望在单击两个固定点之一时都打开它们.
I need both identifiers in the call because there will be multiple nodes, and I do not want all of them opening when I click on one of the pin points.
这是HTML的示例.我正在使用Drupal，因此有很多不必要的代码，但是它尽了我最大的努力来格式化它.
Here is an example of the HTML. I am using Drupal so there is a lot of unnecessary code, but it did my best to format it as quickly as I could.
<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>
我需要将".node-202 .group-dealer"设置为"visibility:hidden"，而不是"display:none".似乎这可能会有所帮助:与jQuery .hide()等效设置可见性:隐藏.
Edit 2: I need to set ".node-202 .group-dealer" to visibility:hidden rather than display:none. It seems that this may be helpful: Equivalent of jQuery .hide() to set visibility: hidden.
推荐答案
假定HTML结构如下所示(并且您具有该结构的多个实例，因此不能仅使用类名):
Assuming that the HTML structure looks like this (and that you have multiple instances of this structure, so you can't just use the class names):
<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();
});
这篇关于通过单击另一个班级来切换班级可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
