Question

我制作了一个嵌套的可分类手风琴，但有些东西不起作用。在id' accordian2'中，每个项目的高度太小，并且显示垂直滚动条。项目的值为“1”正在被剪裁，因此只有一半显示。

有人可以告诉我代码中的问题是什么吗？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

    </head>
    <body>

    <script>
    $(function() {
        function create_accordian(str) {
            $( str )
                .accordion({
                    header: '> div > h3'
                })
                .sortable({
                    axis: 'y',
                    handle: 'h3',
                    stop: function( event, ui ) {
                        // IE doesn't register the blur when sorting
                        // so trigger focusout handlers to remove .ui-state-focus
                        ui.item.children( 'h3' ).triggerHandler( 'focusout' );
                    }
                });
        }
        create_accordian('#accordion');
        create_accordian('#accordion1');
        create_accordian('#accordion2');
        //create_accordian('#accordion3');
    });
    </script>

        <style type='text/css'>
            /*demo page css*/
            #accordion { font: 62.5% 'Trebuchet MS', sans-serif; margin: 10px;}
        </style>


            <div id='accordion'>
                <div class='group'>
                    <h3>
                        <a href='#'>1. blah</a>
                    </h3>
                    <div>



                        <div id='accordion1'>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    <a href='#'>
                                        Edit Item
                                    </a>
                                    <br/>
                                    <span style='display:none;'>
                                        4900bc3b-a086-4d0c-89b8-09e3724aac8e
                                    </span>
                                </div>
                            </div>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    <a href='#'>
                                        Edit Item
                                    </a>
                                    <br/>
                                    <span style='display:none;'>
                                        0d59f87e-a294-4f85-beae-a0e266ab6a7e
                                    </span>
                                </div>
                            </div>
                        </div>



                    </div>
                </div>
                <div class='group'>
                    <h3>
                        <a href='#'>2. blah</a>
                    </h3>
                    <div>


                        <div id='accordion2'>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    1
                                </div>
                            </div>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    1
                                </div>
                            </div>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    1
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>

    </body>
</html>

Answer 1

@omega，在您的手风琴脚本中将 autoHeight 选项设置为false。例如

function create_accordian(str) {
        $( str )
            .accordion({
                header: '> div > h3',
                autoHeight: false  // set this to false
            })
            .sortable({
                axis: 'y',
                handle: 'h3',
                stop: function( event, ui ) {
                    // IE doesn't register the blur when sorting
                    // so trigger focusout handlers to remove .ui-state-focus
                    ui.item.children( 'h3' ).triggerHandler( 'focusout' );
                }
            });
}

DEMO

jQuery UI - 可排序的手风琴无法正常工作

1 个答案: