Question

如果可能的话，需要很少的帮助。我觉得我很接近就是无法弄明白。基本上如标题所示，我需要有几个复选框，如果勾选一个方框，手风琴效果将会启动并显示一个文本区域。

如果勾选方框，我需要手风琴保持打开状态。

如果盒子未打勾，我需要手风琴关闭。

HTML ` 坚实的基础（轮子）

如果您完全合规，则无需进一步评论。如果您尚未完全合规，请提供更多信息。

                        <div class="CheckButton two">
                            <label><input type="checkbox" />Getting to Grips With Governance (The Wheel)</label>                        
                        </div><!--checkButton-->
                        <div class="TextareaAccordion two">
                            <p><span class="helptext">Where you are fully compliant no further comment is necessary. Where you are not yet fully compliant please provide more information.</span></p>
                            <textarea name="" cols="10" rows="3" id="explanatorytext"></textarea>
                        </div>

                        <div class="CheckButton three">
                            <label><input type="checkbox" />Reducing the Risk (The Wheel)</label>                       
                        </div><!--checkButton-->
                        <div class="TextareaAccordion three">
                            <p><span class="helptext">Where you are fully compliant no further comment is necessary. Where you are not yet fully compliant please provide more information.</span></p>
                            <textarea name="" cols="10" rows="3" id="explanatorytext"></textarea>
                        </div>`

JS

<script type="text/javascript">
                    $(document).ready(function() {
                        //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
                        $('.CheckButton.one, .CheckButton.two, .CheckButton.three, .CheckButton.four, .CheckButton.five, .CheckButton.six, .CheckButton.seven, .CheckButton.eight, .CheckButton.nine').click(function() {

                        if($(this).next().is(':hidden') == true) {
                        //ADD THE ON CLASS TO THE BUTTON
                        $(this).addClass('on');
                        //OPEN THE SLIDE
                        $(this).next().slideDown('normal');
                        } 

                    });




                    /**CLOSES ALL S ON PAGE LOAD**/
                    $('.TextareaAccordion.one, .TextareaAccordion.two, .TextareaAccordion.three, .TextareaAccordion.four, .TextareaAccordion.five, .TextareaAccordion.six, .TextareaAccordion.seven, .TextareaAccordion.eight, .TextareaAccordion.nine').hide();});
                </script>

提前致谢！

Answer 1

首先，我会把它拿出来：

$('.TextareaAccordion.one, .TextareaAccordion.two, .TextareaAccordion.three, .TextareaAccordion.four, .TextareaAccordion.five, .TextareaAccordion.six, .TextareaAccordion.seven, .TextareaAccordion.eight, .TextareaAccordion.nine').hide();

我只是使用CSS来隐藏那些div标签。

其次，您不必单独引用它们，$('.TextareaAccordion').hide();就足够了。

以下是我的解决方案：http://jsbin.com/egude4/22/edit

需要使用勾选框打开/关闭的jQuery Accordion，如果勾选了框，则保持打开状态

1 个答案: