Javascript 需要更好的方法在slideToggle调用期间保持字段集宽度

我正在寻找一种很好的方法，当我使用slideToggle“折叠”内部div时，保持fieldset元素的宽度

我的CSS:

.SlidePromptFldSet {
     background: #eee;
    margin: 0;
    padding: 0px;
    border: 0;    
}

.SlidePromptLgnd {
    background: #fff;
    padding: 0px;
    border: 0px;    

    font-weight: bold;
}

    <fieldset id="fldSet"  class="SlidePromptFldSet" style=" width:100%;" runat="server" clientidmode="Static">
        <legend id="lgnd" style="width:100%" class="SlidePromptLgnd" onclick="SlidePrompt(this);"
                 runat="server" clientidmode="Static">                   
        </legend>

        <div id="bodyDiv" style=" width:100%; " class="SlidePromptBodyDiv" clientidmode="Static" runat="server">
             Lorem ipsum neque erat vestibulum primis dui velit venenatis 
             tellus, risus eu eget lorem litora habitasse integer consectetur, dictum proin 
             venenatis sociosqu lobortis mauris quis porttitor dolor tempus rutrum mauris 
             nullam congue eget fringilla convallis.

        </div>    
    </fieldset>

function SlidePrompt(promptLegend) {

if (!$(promptLegend).parent().find("#wrpper").hasClass("closed")) {
    $(promptLegend).parent().find("#wrpper").css("height", "1px");
    $(promptLegend).parent().find("#wrpper").addClass("closed");
}
else {
    $(promptLegend).parent().find("#wrpper").css("height",
                                                  $(promptLegend).parent().find(".SlidePromptBodyDiv").css("height"));
    $(promptLegend).parent().find("#wrpper").removeClass("closed");  
}

我的HTML:

.SlidePromptFldSet {
     background: #eee;
    margin: 0;
    padding: 0px;
    border: 0;    
}

.SlidePromptLgnd {
    background: #fff;
    padding: 0px;
    border: 0px;    

    font-weight: bold;
}

    <fieldset id="fldSet"  class="SlidePromptFldSet" style=" width:100%;" runat="server" clientidmode="Static">
        <legend id="lgnd" style="width:100%" class="SlidePromptLgnd" onclick="SlidePrompt(this);"
                 runat="server" clientidmode="Static">                   
        </legend>

        <div id="bodyDiv" style=" width:100%; " class="SlidePromptBodyDiv" clientidmode="Static" runat="server">
             Lorem ipsum neque erat vestibulum primis dui velit venenatis 
             tellus, risus eu eget lorem litora habitasse integer consectetur, dictum proin 
             venenatis sociosqu lobortis mauris quis porttitor dolor tempus rutrum mauris 
             nullam congue eget fringilla convallis.

        </div>    
    </fieldset>

function SlidePrompt(promptLegend) {

if (!$(promptLegend).parent().find("#wrpper").hasClass("closed")) {
    $(promptLegend).parent().find("#wrpper").css("height", "1px");
    $(promptLegend).parent().find("#wrpper").addClass("closed");
}
else {
    $(promptLegend).parent().find("#wrpper").css("height",
                                                  $(promptLegend).parent().find(".SlidePromptBodyDiv").css("height"));
    $(promptLegend).parent().find("#wrpper").removeClass("closed");  
}

问题：

.SlidePromptFldSet {
     background: #eee;
    margin: 0;
    padding: 0px;
    border: 0;    
}

.SlidePromptLgnd {
    background: #fff;
    padding: 0px;
    border: 0px;    

    font-weight: bold;
}

    <fieldset id="fldSet"  class="SlidePromptFldSet" style=" width:100%;" runat="server" clientidmode="Static">
        <legend id="lgnd" style="width:100%" class="SlidePromptLgnd" onclick="SlidePrompt(this);"
                 runat="server" clientidmode="Static">                   
        </legend>

        <div id="bodyDiv" style=" width:100%; " class="SlidePromptBodyDiv" clientidmode="Static" runat="server">
             Lorem ipsum neque erat vestibulum primis dui velit venenatis 
             tellus, risus eu eget lorem litora habitasse integer consectetur, dictum proin 
             venenatis sociosqu lobortis mauris quis porttitor dolor tempus rutrum mauris 
             nullam congue eget fringilla convallis.

        </div>    
    </fieldset>

function SlidePrompt(promptLegend) {

if (!$(promptLegend).parent().find("#wrpper").hasClass("closed")) {
    $(promptLegend).parent().find("#wrpper").css("height", "1px");
    $(promptLegend).parent().find("#wrpper").addClass("closed");
}
else {
    $(promptLegend).parent().find("#wrpper").css("height",
                                                  $(promptLegend).parent().find(".SlidePromptBodyDiv").css("height"));
    $(promptLegend).parent().find("#wrpper").removeClass("closed");  
}

---

这是可行的，但我希望有一个优雅的方式来做到这一点。我的SlidePrompt函数基本上获取字段集的当前宽度，并将其重新分配给字段集。有没有更好的方法使用CSS等来实现这一点

我有一个解决办法。这可能真的很冗长，但它似乎涵盖了窗口大小改变的情况。我在字段集的bodyDiv周围放了一个包装div。当用户单击图例时，我将包装的高度设置为1px。再次单击图例时，我将包装的高度设置回BodyDiv的高度

我的jQuery:

.SlidePromptFldSet {
     background: #eee;
    margin: 0;
    padding: 0px;
    border: 0;    
}

.SlidePromptLgnd {
    background: #fff;
    padding: 0px;
    border: 0px;    

    font-weight: bold;
}

    <fieldset id="fldSet"  class="SlidePromptFldSet" style=" width:100%;" runat="server" clientidmode="Static">
        <legend id="lgnd" style="width:100%" class="SlidePromptLgnd" onclick="SlidePrompt(this);"
                 runat="server" clientidmode="Static">                   
        </legend>

        <div id="bodyDiv" style=" width:100%; " class="SlidePromptBodyDiv" clientidmode="Static" runat="server">
             Lorem ipsum neque erat vestibulum primis dui velit venenatis 
             tellus, risus eu eget lorem litora habitasse integer consectetur, dictum proin 
             venenatis sociosqu lobortis mauris quis porttitor dolor tempus rutrum mauris 
             nullam congue eget fringilla convallis.

        </div>    
    </fieldset>

function SlidePrompt(promptLegend) {

if (!$(promptLegend).parent().find("#wrpper").hasClass("closed")) {
    $(promptLegend).parent().find("#wrpper").css("height", "1px");
    $(promptLegend).parent().find("#wrpper").addClass("closed");
}
else {
    $(promptLegend).parent().find("#wrpper").css("height",
                                                  $(promptLegend).parent().find(".SlidePromptBodyDiv").css("height"));
    $(promptLegend).parent().find("#wrpper").removeClass("closed");  
}

---

您可以在父屏幕上尝试使用

最小宽度

。。。但是你的方式看起来是最好的解决办法。谢谢你的想法。我想到了另一种方法，即在bodydiv周围放置一个包装div。我有下面的细节。