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，他就会设置某些区域显示：none和一些显示：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

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

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

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

或者更好

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

.slideToggle（）检查

1 个答案: