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>

我想做的是编写一个 jQuery 脚本，首先将隐藏每个商店的“store_details”div 的内容。当用户单击商店名称（国家/地区）时，脚本必须显示该“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

您应该能够通过搜索得到答案。无论如何都买，这应该让你去

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

试试这个：

$(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

一种更健壮的方式（即使用子代而不是下一个，更正标记）：

代码笔： 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 回答