Javascript .slideToggle（）检查

我有一份菜单，里面有不同的幻灯片切换。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');

          });

现在你可以看到，一旦我点击一个.切换器，他会设置某个区域的显示：无，一些区域的显示：块。但如果我可以替换这部分代码，还有什么更完美的呢

$(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>

西顿苏泽纳酒店
现代/欧宝/雪佛兰
现代/欧宝/雪佛兰

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

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

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

或者更好

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

---

但是如果我使用$（this.parent（）.parent（）.find（'.commonClass'）.slideToggle（），那么它会在内容关闭时滑动打开内容吗？但是我需要一个脚本来检查它是打开的还是关闭的。当它打开时，然后只关闭该分区。@Augus抱歉，我不确定我是否理解。您的意思是要检查带有toggler类的单击div是否打开，如果打开，请关闭它？如果是这种情况，您可以调用$（this）.slideToggle（）；这里的函数是$（'.toggler'）.live（'click'，function（）{}）。但我有一种感觉，我可能还是误解了。我想检查一下是否有其他分区处于打开状态，如果有，请用幻灯片关闭此分区。因此，当我用.toggler单击div时，请检查.toggle_内容是否打开，如果打开，请滑动.toggle_内容以关闭。@Augus调用$（this）.parent（）.parent（）.find（'.toggled_内容'）.slideToggle（）；你的功能是正确的。虽然听起来toggle_content类中有多个元素，如果是这样，那么您必须将.toggle_holder&toggle_内容包含在另一个div中，以便在其他类的每个滑块中获得正确的内容。所以我得到了。切换内容，。切换内容2，等等。这样就不会有问题了。你的电话也可以。除了我想在滑动切换之前检查是否关闭了类的div。否则，如果它已经关闭，它将打开。