0

私は次のHTML構造を持っています

<div class="store"><a href="#">GERMANY</a></div>
<div class="store_details">
   <p>Stores in Germany</p>
</div>
</div>
<div class="store"><a href="#">ITALY</a></div>
<div class="store_details">
   <p>Stores in Italy</p>
</div>
</div>
<div class="store"><a href="#">FRANCE</a></div>
<div class="store_details">
   <p>Stores in France</p>
</div>
</div>

私がやりたいことは、最初に各ストアの「store_details」div の内容を非表示にする jQuery スクリプトを作成することです。ユーザーが店舗名 (国) をクリックすると、スクリプトはその "store_details" div を表示し、他の "store_details" div の内容を非表示にする必要があります。

div の最初の非表示はなんとかできましたが、他の手順で行き詰まりました。

どんな助けでも大歓迎です。

ありがとう。

4

4 に答える 4

1

コード :

$(document).ready(function(){
    $(".store_details").hide();
    $(".store a").click(function() {
        $(".store_details").hide();
        $(this).parent().next().show();
    });​
});​

働くフィドル

于 2012-10-20T16:27:17.720 に答える
0

これを試して：

$(document).ready(function(){          /* when the page has loaded in the browser... */
   $('.store').click(function(){ /* ...bind a click event to the div element... */
    $('.store').removeClass('store_details'); /* When clicked, remove any 'store_details' class off boxSet elements */
    $(this).next().addClass('store_details'); /* ...and add the 'hilite' class to the clicked element */
});
});
于 2012-10-20T16:26:39.300 に答える
0

検索すれば答えが得られるはずです。とにかく購入してください。これでうまくいくはずです

CSS:

.store_details { display: none; }

js:

$(function(){
    $('.store a').click(function(){ //listen for link clicks
         $('.store_details').hide(); //hide all store details
         $(this).closest('div.store').next('div.store_details').show(); //show the selected detail div
    });
});
于 2012-10-20T16:24:43.903 に答える
0

より堅牢な方法 (つまり、次の代わりに子を使用し、マークアップを修正する):

コードペン: http://codepen.io/anon/pen/idcro

$(function(){
    $('.store a').on('click', function(){
        var store_details = $('.store_details').hide();
        var l = $(this).parent().children('.store_details');
        l.show();
    });    
})();
于 2012-10-20T16:46:35.687 に答える