Question

目标：
当徽标图像点击并淡出“tiles-wrapper”DIV中的所有其他内容时，淡入（）'公司内容'。公司内容的宽度与完整的“瓷砖包装”显示器DIV相同。

... THEN
显示“company-content”时，BACK链接会将页面返回到原始状态。

对于'company-logos'和'company-content'（=垃圾'li.content-wrapper'想法）与发布的代码，我是否需要使用2个独立的UL和唯一的类名？

**我之前实际上已经这样做了。我正在失去理智。我不记得我是怎么做到的。任何建议都表示赞赏。*

<div class="tiles-wrapper">
    <ul class="tiles-list">
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="#"><img src="company1.png" alt="" border="0" /></a></div>
            <div class="company-content">
                <h1>Company 1</h1>
                <div class="goback"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="#"><img src="company2.png" alt="" border="0" /></a></div>
            <div class="company-content">
                <h1>Company 2</h1>
                <div class="goback-btn"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
            </div>
        </li>
        <li class="company-wrapper">
            <div class="company-logo"><a class="company-logo-btn" href="#"><img src="company3.png" alt="" border="0" /></a></div>
            <div class="company-content">
                <h1>Company 3</h1>
                <div class="goback-btn"><a class="goback-btn" href="#">&larr; BACK TO ALL</a></div>
            </div>
        </li>
    </ul>
</div>

...并在PHP中循环以添加更多行...

Initial display Results display

Answer 1

<强>更新

使tile-wrapper的内容宽度和高度相同但隐藏，并使用javascript生效。

JsCode：

$(document).ready(function () {
    $(".company-logo-btn").on("click", function () {
        var bRunOnce = true;
        var $wrapper = $(this).parents(".company-wrapper:first");
        $wrapper.siblings().fadeTo("slow", 0, function () {
            if (bRunOnce) {
                bRunOnce = false;
                $wrapper.find(".company-content").fadeIn("slow");
            }
        });
    });
    $("body").on("click", ".goback-btn", function () {
        $(".company-content:visible").fadeOut("slow", function () {
            $(this).parents(".company-wrapper:first").siblings().css("visibility","").fadeTo("slow", 1);
        });
    });
});

以下是Demo on Jsfiddle

再次更新：

我做了一个淡入淡出效果演示，但我忘了昨天用小提琴更新它，检查This Demo

jQuery用内容替换图像

1 个答案: