Question

我正在使用jquery选择的插件，这里我使用的是select多个选项，其父级是显示块，但选择的选项宽度在这种情况下不显示。怎么办？！[它没有显示具有“display：none

的活动类的全宽度

<h3 class="expand_heading ui-widget-header">Education and Career</h3><!-- <span class="ui-state-default ui-corner-all ui-icon ui-icon-plus" style="float: right;display:inline-block;background-position: -32px -128px;margin-right: 10px;"></span> -->
                        <div class="toggle_container">
                            <div style="width:100%;">
                            <div class="BoxSr">
                                <div class="SearchLebel">
                                    <label for="Educational">Educational Qualifications</label>
                                </div>
                                <div class="SearchBox">
                                    <select name="education" class="chzn-select" multiple  style="font-size: 11px; width: 300px;">
                                        <!-- <option value="" selected="selected">Doesn't Matter </option> -->
                                        <option value="Bachelors">Bachelors</option>
                                        <option value="Masters">Masters</option>
                                        <option value="Doctorate">Doctorate</option>
                                        <option value="Diploma">Diploma</option>
                                        <option value="Undergraduate">Undergraduate</option>
                                        <option value="Associates degree">Associates degree</option>
                                        <option value="Honours degree">Honours degree</option>
                                        <option value="Trade school">Trade school</option>
                                        <option value="High school">High school</option>
                                        <option value="Less than high school">Less than high school</option>
                                        <option value="Others">Others</option>
                                    </select>
                                </div>
                            </div>

jquery插件

<script type="text/javascript">
        $(document).ready(function() {
            //$(".toggle_container").show();

            $("h3.expand_heading").toggle(function() {
                $(this).addClass("active");
            }, function() {
                $(this).removeClass("active");
            });
            $("h3.expand_heading").on("click", function(e) {
                $(this).next(".toggle_container").slideToggle();

            });

        });

    </script>

CSS

h3.expand_heading {
            width: 560px;
            height: 30px;
            margin: 5px 0px 5px 15px;
            border: 1px solid #dddddd;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: block;
            padding: 10px 0px 0px 10px;
            background: #f7f6da url(minus.png) center right no-repeat;
            background-position-x: 98%;
            cursor: pointer;
        }

        h3.active {
            background: #f7f6da url(plus.png) center right no-repeat;
            background-position-x: 98%;
            cursor: pointer;
        }
        .toggle_container {
            display:none;
            overflow: hidden;
            width: 100%;
            clear: both;
            margin: 20px 0px 20px 0px;
        }

enter code here

如果在首次加载时“display：none”处于活动状态，则自动宽度无法正常工作

0 个答案: