2

我正在使用 jQuery 的 slideToggle() 函数来控制我网站的展开/折叠功能。目前，在我在整个网站上实施之前，我只有一个页面已经开发；在这里。

默认情况下，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设置解决了这个问题）。

一旦我能够解决这个问题，我就可以继续将此设计实施到其他页面中。

PS - 目前使用的是Redsquare的方法，所以扩展是可以的，但他们不想崩溃。

谢谢你，
迪伦。

4

2 回答 2

0

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

使用 .toggleClass() ：http ://api.jquery.com/toggleClass/

像这样的东西：

CSS：

.DisplayNone{
   display: none;
}

.DisplayInlineTable{
   display: inline-table;
}

然后创建 onclick 事件：

jQuery：

$(parent).click(function(){
   $(child).toggleClass("DisplayInlineTable").slideToggle();
});
于 2012-12-10T14:35:04.400 回答
0

这似乎对我有用。使用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 中删除 min-height。

在您的 HTML 中，将每个规范包含在一个分类为 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");});

            }
        });
    });
});​
于 2012-12-10T15:20:09.593 回答