0

嘿，我正在寻求帮助 - 我更像是一名设计师而不是编码员，但我正在努力学习 :)

我确实有这种工作，但我不知道如何让缩略图图像调整到展开的 div 的高度 - 随着它的展开。

我有一个容器 div，在该 div 里面我有多个“可扩展”的 div，其中包含有关不同产品的信息。

这些可扩展的 div 中的每一个都有一个标题、一个缩略图和产品价格（以及一个用于扩展 div 本身的加号图像）。

当 div 展开时，会显示有关产品的更多信息。

但是当 div 展开时，我还希望“价格”消失（因为它现在在展开的信息中可见），并且我希望图像自动缩放到展开的 div 的高度。

因此产品信息将位于 div 的左侧，图像将占据 div 的右半部分（减号按钮位于其顶部。

这是我的html

<div class="expandingContentContainer">
    <div class="expandingContent">
        <div id="expandingContentHeader" style="display:inline; float:left">
            <h4>Portable navigation system</h4>
        </div>
        <div id="expandingContentThumb" style="display:inline;">
            <img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
        </div>
        <div id="expandingContentPrice" style="display:inline;">
            <img src="images/assets/icon_pound.png" />Price: £200
        </div>
        <div id="expanderSign">
            <img src="images/assets/icon_plus.png" />
        </div>
        <div id="expanderContent" style="display:none">
            <p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
            <p><img src="images/assets/icon_pound.png" />Price: £200</p>
            <p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
        </div> 
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
    $("#expanderContent").slideToggle();
    if ($("#expanderSign").text() == "+"){
        $("#expanderSign").name("−")
    }
    else {
        $("#expanderSign").text("+")
    }
});
});
</script>
4

2 回答 2

0

听起来你可以用 CSS 完全解决。只要 container-div 有一个固定的高度，您应该可以将 img-element 的高度设置为height: 100%，从而使图像相应地缩放。但是，当容器的显示模式设置为 时，这将不起作用display: inline。您必须使用display: inline-block才能设置 div 的高度。

于 2013-05-10T13:53:24.353 回答
0

为了获得良好的帮助，您应该添加指向您的网站或 css 文件的链接。您将需要对 css 进行一些更改，并且可能（取决于您需要的支持）一些 javascript（jquery 或 zepto）。您也可以使用预构建库，但实际上没有必要。

于 2013-05-10T14:01:16.283 回答