HTML與CSS練習——js選擇器
阿新 • • 發佈:2018-12-26
<div class="slider_page_item">
<div class="slider_page_title">
<a href="#">Preserve agricultural diversity</a>
</div>
<div class="slider_page_text playno">
<p>Organically grown foods have more nutrients—vitamins, minerals, enzymes, and micronutrients—than commercially grown foods because the soil is managed and nourished with sustainable practices by responsible standards. Organic farming supports eco-sustenance, or farming in harmony with nature.</p>
</div>
</div>
<script type="text/javascript">
var slider_page_title = $('.slider_page_title');
slider_page_title.on('click', function() {
$(this).toggleClass("active");
});
var slider_page_item = $('.slider_page_item');
var slider_page_text = $('.slider_page_text');
slider_page_title.on('click',function(){
if ($(this).is('.active')) {
// 等同於 $(this).parent().find('.slider_page_text').removeClass("playno");
$(this).siblings('.slider_page_text').removeClass("playno");
}else{
$(this).parent().find('.slider_page_text').addClass("playno");
};
});
<div class="slider_page_title">
<a href="#">Preserve agricultural diversity</a>
</div>
<div class="slider_page_text playno">
<p>Organically grown foods have more nutrients—vitamins, minerals, enzymes, and micronutrients—than commercially grown foods because the soil is managed and nourished with sustainable practices by responsible standards. Organic farming supports eco-sustenance, or farming in harmony with nature.</p>
</div>
</div>
<script type="text/javascript">
var slider_page_title = $('.slider_page_title');
slider_page_title.on('click', function() {
$(this).toggleClass("active");
});
var slider_page_text = $('.slider_page_text');
slider_page_title.on('click',function(){
if ($(this).is('.active')) {
// 等同於 $(this).parent().find('.slider_page_text').removeClass("playno");
$(this).siblings('.slider_page_text').removeClass("playno");
}else{
$(this).parent().find('.slider_page_text').addClass("playno");
};
});
</script>
實現單個點選顯示隱藏效果