同时切换显示/隐藏和替换 div 内容

Question

我正在做一个项目，我有一排带有“查看产品”按钮的产品框，我需要在点击时显示一个隐藏的 div，其中包含所有产品。当显示隐藏的 div 时，我希望 div 中包含产品品牌（和“查看产品”链接）的内容更改为仅显示产品徽标和“全部隐藏”按钮。

我使用下面的脚本使显示/隐藏切换功能正常工作，但不确定如何使用其中的按钮获取 div 的内容以更改并将切换添加到“隐藏”按钮？此外，当单击另一个“查看产品”按钮时，另一个产品框应恢复到原来的状态。我附上了我在做什么的想法，因为我意识到我的描述可能有点令人困惑——“screen1.gif”显示了一排框/品牌——“screen2.gif”显示了当你点击一个品牌时会发生什么以及其他产品的品牌出现在下方。

屏幕 1 - http://hoohoots.com/dev/screen1.gif 屏幕 2 - http://hoohoots.com/dev/screen2.gif

任何帮助将不胜感激。 谢谢， 大卫

显示/隐藏切换脚本：

<script type="text/javascript">
function toggle_visibility(id) {
    event.preventDefault();
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';

    hideAllBut(id);
}

function hideAllBut(id) {
var lists = document.querySelectorAll('.reveal');
for (var i = lists.length; i--; ) {
    if (lists[i].id != id) {
        lists[i].style.display = 'none';
        }
    }
}
</script>

Answer 1

这是一个开始。我试图保持与您相同的结构。

HTML - 添加一个this 以引用每个btn_view link onclick="toggle_visibility('all-product-one',this);" 的点击元素

例如

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-one',this);">VIEW ALL</a></div>

jQuery

function toggle_visibility(id,el) {
    event.preventDefault();
    $('.btn_view a').html('VIEW ALL');
    $('.price-text').show();
    var e = document.getElementById(id);
    if (e.style.display == 'block') 
    {
        e.style.display = 'none';
        $(el).html('VIEW ALL');
    }
    else 
    {
        e.style.display = 'block';
        $(el).html('HIDE ALL');
        $(el).parent().parent().find('.price-text').hide();
        //$(el).parent().prev('.price-text').hide();
    }

    hideAllBut(id);
}

例子：

http://jsfiddle.net/trevordowdle/d2cXB/9/

Answer 2

你可以像这样添加一个css类：

.clicked{
    background-color:black;
    // other css code here
}

然后，当点击 div 时，只需将此类添加到 div，您也可以使用 jquery 来执行此操作。