1
所以，我有四個框，每個框都有一個數據屬性，我用它來定位四個其他顯示和隱藏的框。我有點功能，我想怎麼做。顯示和隱藏內容的jQuery函數
但是說我點擊框one然後框two他們都顯示。我想要的只是最後點擊的盒子，而其他所有人都隱藏起來。如果單擊框one，則會顯示該框，如果再次單擊該框，它將隱藏。
這是我到目前爲止有：
$(document).ready(function(){
$(".click").click(function(){
var current_sec = $(this).data("section");
if($(this).hasClass("clicked")){
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else{
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
}
});
});.click{
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one{
background-color: blue;
}
#two{
background-color: yellow;
}
#three{
background-color: red;
}
#four{
background-color: orange;
}
.sections{
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
}
.show{
max-height: 1000px;
}
#section_1{
background-color: blue;
}
#section_2{
background-color: yellow;
}
#section_3{
background-color: red;
}
#section_4{
background-color: orange;
}<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>
<div class="sections" id="section_1">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_2">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_3">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_4">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>