0

私はまだ非常に初心者なので、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/

4

2 に答える 2

0

このフィドルを試してみてくださいhttp://jsfiddle.net/RdSeS/

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

});
于 2013-05-20T19:06:02.403 に答える
0

私はあなたがこのようなものを探していると思います:

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

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

于 2013-05-20T19:11:45.667 に答える