Question

我有以下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的初始隐藏，但是我被其他步骤困住了。

感谢任何帮助。

感谢。

Answer 1

代码：

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

工作fiddle

Answer 2

您应该可以通过搜索获得答案。无论如何购买，这应该让你去

的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
    });
});

Answer 3

试试这个：

$(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 */
});
});

Answer 4

更强大的方式（即使用子代替下一代，更正标记）：

CodePen：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();
    });    
})();

使用jQuery根据用户交互隐藏/取消隐藏div内容

4 个答案: