显示/隐藏具有按钮更改文本的div

Question

我有一个我不知道如何解决jQuery的问题，因为我还是很菜鸟。

我有4个（或更多）框，每个框都有一个“查看详细信息”按钮，我需要的是，当您单击“查看详细信息”时，会显示一个隐藏的div及其相应信息，但当您隐藏显示div时，按钮更改为“隐藏详细信息”-我可以用切换点将其点开，但要注意的是，如果单击按钮“查看另一个框的详细信息”，div不会隐藏，并且会赢得“隐藏详细信息”按钮请回到默认状态，希望有人能理解并为我提供帮助。

<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>
<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>

这是我的jfiddle http://jsfiddle.net/Dx9Wc/

Answer 1

试试这个小提琴http://jsfiddle.net/RdSeS/

$(".view_details").click(function () {
$(".details").hide();
$(this).parents('.box').find('.details').html($("#model_details").html()).show();

});

Answer 2

我认为您正在寻找这样的东西：

$(document).ready(function() {
    $('#product_id_1').on('click', function(){
        $('#model_details').css('display', 'block');
    });
});

http://jsfiddle.net/Dx9Wc/3/