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

时间:2013-12-10 17:27:32

标签: javascript jquery class

我正在开展一个项目,我需要点击.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

2 个答案:

答案 0 :(得分:2)

假设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

答案 1 :(得分:1)

试试这个..

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

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

    })

<强> FIDDLE DEMO