Question

当我点击Number One链接并且现在显示产品详细信息但是当我再次点击时，产品详细信息div将不会隐藏，请参阅链接：

Answer 1

请参阅此解决方案。没事吗？

var last_clicked_id = 0;
$(function(){   

jQuery('a[id^="prod"]').on('click', function(e) {
    var id = $(this).attr('id').slice(-1);
    $(".product-detail").hide();

    if(last_clicked_id != id){
        $('.det'+id).show();
    }
    last_clicked_id = id; 


});
});

Answer 2

看到你的更新小提琴：

http://jsfiddle.net/jFIT/hLd5W/4/

var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
    }

    //if (detailedDiv.is(':visible')) detailedDiv.hide();
    //else detailedDiv.show();
    e.preventDefault()

Answer 3

将您的点击事件更改为：

$(function(){   
  $('a[id^="prod"]').on('click', function() {
    var id = $(this).attr('id').slice(-1);

    // Hide all .product-detail divs except the one you want to toggle.
    $('div.product-detail:not(.det' + id + ')').hide();

    // Toggle show/hide the desired div
    $('div.product-detail.det'+id).toggle();

    return false;
  });
});

顺便说一句，它仍然很难看，我只是修改了你的代码以使它工作。我会在元素上添加类似data-id =“N”的属性，所以我不必使用slice（）和连接字符串。

另外，和其他人一样指出，请将您的代码和HTML放在问题中，不要指望我们关注您的链接。

点击div显示但不隐藏请帮助我

3 个答案: