通过单击另一个类来切换类可见性答案

【问题标题】：Toggle Class Visibility by Clicking on another Class通过单击另一个类来切换类可见性
【发布时间】：2013-12-28 08:49:39
【问题描述】：

我正在处理一个项目，我需要能够点击.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”设置为 visibility:hidden 而不是 display:none。看来这可能会有所帮助：Equivalent of jQuery .hide() to set visibility: hidden.

【问题讨论】：

一些代码的演示将帮助我们回答你。
什么是 HTML 标记？这是获得好答案的关键。
添加了标记示例。

标签： javascript jquery class

【解决方案1】：

假设 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();
});

TEST IN JSFIDDLE

【讨论】：

您对 html 结构的看法是正确的。我刚刚在原始帖子中添加了标记。我正在使用 Drupal，所以有点乱。不幸的是，我测试了您在此处发布的内容，但没有成功。
@e.shell 我在代码中有两个小错误。我更新了它并添加了一个 JSFiddle 测试。
@Mosge 实际上，我似乎需要将组设置为可见性：隐藏而不是显示：无。元素是绝对定位的，因此当组设置为 display:none 时，精确点会移出屏幕。我知道听起来很奇怪哈哈。我基本上是在地图上定位点，这些点会弹出包含有关该位置的更多信息的弹出窗口。

【解决方案2】：

试试这个..

 $('.node-202 .field-name-field-pin-point').bind('click', function(){

            $('.node-202 .group-dealer').toggle();

    })

FIDDLE DEMO

【讨论】：

不幸的是，这会切换两个元素。单击包含 .field-name-field-pin-point 的元素后，将不再显示所有 node-202。
@e.shell 你检查过我的小提琴吗，它不会删除整个 '.node-202'
啊哈！你是对的。我有绝对定位的元素，所以一旦它被点击它就被隐藏了。这似乎是我需要的解决方案！
实际上，我似乎需要将组设置为可见性：隐藏而不是显示：无。元素是绝对定位的，因此当组设置为 display:none 时，精确点会移出屏幕。这听起来很奇怪，但我基本上是在地图上定位点，这些点会弹出包含有关该位置的更多信息的弹出窗口。