.slideToggle()检查

Question

我有一个菜单，里面有不同的滑动开关。javascript如下所示：

$('.toggler').live('click',function(){
              $(this).parent().children().toggle();  //swaps the display:none between the two spans
              $(this).parent().parent().find('.toggled_content').slideToggle();  //swap the display of the main content with slide action
              $(this).parent().parent().find('.toggled_content2').css('display', 'none');
              $(this).parent().parent().find('.div2').css('display', 'none');
              $(this).parent().parent().find('.ap2').css('display', 'block');
              $(this).parent().parent().find('.toggled_content3').css('display', 'none');
              $(this).parent().parent().find('.div3').css('display', 'none');
              $(this).parent().parent().find('.ap3').css('display', 'block');
              $(this).parent().parent().find('.toggled_content4').css('display', 'none');
              $(this).parent().parent().find('.div4').css('display', 'none');
              $(this).parent().parent().find('.ap4').css('display', 'block');

          });

现在你可以看到，一旦我点击一个.toggler，他就会将某些区域设置为display:none，将一些区域设置为display:block。但是，如果我可以替换这部分代码，将会更完美：

$(this).parent().parent().find('.toggled_content2').css('display', 'none');

到一些检查块是否打开的代码，所以是的，然后滑动关闭它。我不知道这是否可能，但如果可能的话，那就更好了。

感谢大家的支持！

下面是HTML：

                        <div id="spacerouter"><div id="spacer"><div id="spacerin"></div><div id="spacerinr"></div></div></div>
                <div class='toggleHolder'>
                    <div id="company" class='toggler ap1'>
                        <div id="companysiton"></div>
                            <div id="companyname">
                                <h1>Siton Suzenaar</h1>
                                <h2>Hyundai / Opel / Chevrolet</h2>
                            </div><!-- companyname -->
                    </div><!-- company -->
                    <div id="company2" class='toggler div1' style='display:none;'>
                        <div id="companysiton"></div>
                            <div id="companyname">

                                <h2>Hyundai / Opel / Chevrolet</h2>
                            </div><!-- companyname -->
                    </div><!-- company -->
                </div><!-- toggleHolder -->
                <div class='toggled_content' style='display:none;' id="toggled_content">
                    <h3>



                    </h3>
                    <h3>
                    <a href="mailto:mail@mailhost.nl">mail@mailhost.nl</a><br />

                    </h3>
                </div>

Answer 1

您可以使用可见和隐藏选择器，并为所有需要切换的元素添加一个公共类。

$(this).parent().parent().find('.commonClass:visible').css('display', 'none');

$(this).parent().parent().find('.commonClass:hidden').css('display', 'block');

或者更好

$(this).parent().parent().find('.commonClass').slideToggle()