1

我的 asp.net-mvc4 视图中有 2 个手风琴和 2 个面板。第一个手风琴的面板被调整到它们的内容高度，但我不知道为什么第二个手风琴的面板没有被调整到它们的内容。两个手风琴完全一样……那怎么了？

在第二个手风琴中，面板出现垂直滚动条，我不想要它。见下文：http ://snag.gy/3hld2.jpg

如您所见，手风琴的第一个面板显示垂直滚动条，并且不会调整其内容的大小。第二个面板也会发生。

看法：

        <div id="accordion2" style ="width: 790px;">
           <div class="group">
             <h3>Filters</h3>                     
             <div>
                @using (Ajax.BeginForm("MyAction", "MyController",
                   new AjaxOptions
                   {
                       HttpMethod = "GET",
                       InsertionMode = InsertionMode.Replace,
                       UpdateTargetId = "jqGrid",
                       OnSuccess = "showGrid()"
                   }))
                {
                <table>
                    <tr>
                        <td> 
                            <div id = "TypeFilter">
                                @Html.LabelFor(...)
                                @Html.DropDownListFor(...)
                            </div>
                        </td>
                        <td id="ApplyFilter" >
                            <input type="submit" name="_search" value="@Resource.CaptionApplyFilter" />
                        </td>
                    </tr>
                </table>
                }
             </div>
           </div> <!-- end group -->
           <div class="group">
             <h3>Add item</h3>

             <div>
                 @using (Html.BeginForm("MyAction2", "MyController", FormMethod.Post))
                 { 
                     <table>
                         <tr>
                             <td>
                                 <div id="itemId">
                                     @Html.LabelFor(...)
                                     @Html.DropDownListFor(...)
                                 </div>
                             </td>
                             <td>     
                                 <label for="Name">Name:</label>                     
                                 @Html.TextBox("Name", null, new { @class = "textStyle" })
                             </td>
                             <td>
                                 <label for="Desc">Desc.:</label> 
                                 @Html.TextBox("Desc", null, new { @class = "textStyle" })
                             </td>
                             <td>
                                 <input id="submitAdd" type="submit" value="@Resource.ButtonTitleAdd" />
                             </td>
                         </tr>                                
                     </table>
                 }
             </div>
           </div>  <!--end group -->
        </div> <!-- end accordion -->

视图中的脚本：

    $(function () {
        function subscribe_accordion_to_hoverintent_event(accordionId) {
            $(accordionId).accordion({
                header: "> div > h3",
                event: "click hoverintent"
            });
        }

        subscribe_accordion_to_hoverintent_event("#accordion1");
        subscribe_accordion_to_hoverintent_event("#accordion2");
    });

    // Collapse content
    $(function () {
        function set_accordion_as_collapsible(accordionId) {
            $(accordionId).accordion({
                collapsible: true//,
                //heightStyle: "content"
            });
        }

        set_accordion_as_collapsible("#accordion1");
        set_accordion_as_collapsible("#accordion2");
    });

    // Sortable functionality
    $(function () {
        function set_accordion_as_sortable(accordionId) {
            $(accordionId).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");
                  }
            });
        }

        set_accordion_as_sortable("#accordion1");
        set_accordion_as_sortable("#accordion2");
    });

    /*
    * hoverIntent | Copyright 2011 Brian Cherne
    * http://cherne.net/brian/resources/jquery.hoverIntent.html
    * modified by the jQuery UI team
    */
    $.event.special.hoverintent = {
        setup: function () {
            $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        teardown: function () {
            $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        handler: function (event) {
            var currentX, currentY, timeout,
args = arguments,
target = $(event.target),
previousX = event.pageX,
previousY = event.pageY;
            function track(event) {
                currentX = event.pageX;
                currentY = event.pageY;
            };
            function clear() {
                target
.unbind("mousemove", track)
.unbind("mouseout", clear);
                clearTimeout(timeout);
            }
            function handler() {
                var prop,
orig = event;
                if ((Math.abs(previousX - currentX) +
Math.abs(previousY - currentY)) < 7) {
                    clear();
                    event = $.Event("hoverintent");
                    for (prop in orig) {
                        if (!(prop in event)) {
                            event[prop] = orig[prop];
                        }
                    }
                    // Prevent accessing the original event since the new event
                    // is fired asynchronously and the old event is no longer
                    // usable (#6028)
                    delete event.originalEvent;
                    target.trigger(event);
                } else {
                    previousX = currentX;
                    previousY = currentY;
                    timeout = setTimeout(handler, 100);
                }
            }
            timeout = setTimeout(handler, 100);
            target.bind({
                mousemove: track,
                mouseout: clear
            });
        }
    };
4

0 回答 0