Question

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

我使用下面的脚本进行显示/隐藏切换工作，但不确定如何使用其中的按钮来更改div的内容并将切换添加到“隐藏”按钮？此外，当单击另一个“VIEW产品”按钮时，另一个产品框应该返回到原始状态。我已经附上一个关于我正在做什么的想法，因为我意识到我的描述可能有点令人困惑 - '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

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

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

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

Answer 2

这是一个开始。我试图保持你所拥有的相同结构。

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

的点击元素

E.G。

<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/

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

2 个答案: