Question

我正在使用jQuery的slideToggle（）函数来控制我网站的展开/折叠功能。目前，在我在整个网站上实施之前，我只有一个页面已经开发出来; here it is

默认情况下，jQuery slideToggle（）使用 display =“block”，这对我没有帮助。我希望在面板展开时使用 display =“inline-table”，并在同一面板恢复时恢复为 display =“none”折叠。

我已经将一些设置应用于CSS，以确保布局符合我的要求：

.specs {
    width: 930px;
    height: 100px;
    border: none;
    color: #ffffff;
    font-weight: normal;
    display: none;
}

height属性用于确保面板中的所有图标都是完全可见的。删除它会导致像“内存”这样的较小面板切断图标的一半。

折叠时，面板设置为 display =“none”，以确保它们不会影响布局。但是，在扩展时，需要将它们设置为 display =“inline-table”以绕过一些对齐问题，这些问题在查看“Web浏览”和“后置摄像头”等面板时可以看到（基本上，列表与下面的DIV重叠，而 inline-table 设置修复了这些。）

只要我能够解决这个问题，我就可以继续将这个设计实现到其他页面中。

P.S。 - 目前正在使用Redsquare's method，因此扩展很好，但他们不想崩溃。

谢谢你，
迪伦。

Answer 1

您不必使用slideToggle（）内置函数，创建自己的函数。

使用.toggleClass（）：http://api.jquery.com/toggleClass/

这样的事情：

的CSS：

.DisplayNone{
   display: none;
}

.DisplayInlineTable{
   display: inline-table;
}

然后创建onclick事件：

jquery的：

$(parent).click(function(){
   $(child).toggleClass("DisplayInlineTable").slideToggle();
});

Answer 2

这似乎对我有用。使用min-height代替height

.specs {
    width: 930px;
    /*min-height: 100px; CHECK UPDATE */
    border: none;
    color: #ffffff;
    font-weight: normal;
    display: none;
}

更新：在http://jsfiddle.net/LLQyV/1/

中查看此操作

试试这个。从CSS中删除最小高度。

在你的HTML中将div中的每个规范都包含在一个被归类为toggleContainer的div中（我复制了你的常规类别并为每个规范添加了各种规范。）

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
        <li>Released in March 2012</li>
        <li>£429 (GBP); $399 (USD)</li>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
        <li>Released in March 2012</li>
        <li>£429 (GBP); $399 (USD)</li>
    </ul>
</div>
</div>

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>£429 (GBP); $399 (USD)</li>
    </ul>
</div>
</div>

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
    </ul>
</div>
</div>

然后在你的JS文件中执行此操作（我将所有onclick ='toggle'调用合并到此文件中）

$(function() {
    $(".toggleContainer").each(function() {
        //store the .specs height to an unchanging attribute
        $(this).find(".specs").attr("specHeight", $(this).find(".specs").height());

        //when the cat is clicked, expand or collapse the spec
        $(this).find(".spec-cat-content").click(function(e) {
            e.preventDefault();
            //find spec for current toggleContainer that contains this category toggle button
            var spec = $(this).parent().parent().find(".specs");

            //check to see if the spec is displayed.
            if ($(spec).css("display") == "none") {
                //if it isn't then animate to specHeight attr and display block                $(spec).height(0);
                $(spec).css("display","block");
                var newHeight=$(spec).attr("specHeight");
                if(newHeight<100)
                    newHeight=100;
                $(spec).animate({height:newHeight},400);
            }
            else {
                //if it is, then animate to 0 height, and display:none
                $(spec).animate({height:0},400,function(){$(spec).css("display","none");});

            }
        });
    });
});

jQuery slideToggle（）问题 - 更改显示：要显示的块：内联表？

2 个答案: