關閉一個DIV打開另一個

Question

（第一次海報）

當作爲我的名字說我是小白，當談到jQuery的，所以這是我的問題，我得到了這3個盒子，我可以「打開」和「關閉」，但是當我打開一個我想其他箱子關閉......我已經搜索了一個答案，但無法真正找到一個，所以如果你知道這個問題是否已經回答然後說出來，併發布鏈接:)

$('.box').click(function() { 
 
    var clicks = $(this).data('clicks'); 
 

 
    if (clicks) { 
 
    //odd click 
 
    $(this).animate({ 
 
     height: '3rem' 
 
    }, 500); 
 

 
    } else { 
 
    //even click 
 
    $(this).animate({ 
 
     height: '13rem' 
 
    }, 500); 
 

 
    } 
 
    $(this).data("clicks", !clicks); 
 

 

 
});

.box { 
 
    height: 3rem; 
 
    width: 10rem; 
 
    background-color: #be6666; 
 
    overflow: hidden; 
 
} 
 
.inside { 
 
    height: 0rem; 
 
    margin-top: 3rem; 
 
    background-color: #be6666; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-size: 1.2rem; 
 
    padding: 0 5px; 
 
} 
 
.content { 
 
    margin-top: 2rem; 
 
    margin-left: 2rem; 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="margin-left:1rem;margin-right:1rem"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

已使用animate方法由jQuery提供，我想建議你更簡單和更好的解決方案。

$('.box').click(function() { 
 
    $(this).toggleClass('opened'); 
 
    $('.box').not(this).removeClass('opened'); 
 
});

.box { 
 
    height: 3rem; 
 
    width: 10rem; 
 
    background-color: #be6666; 
 
    overflow: hidden; 
 
    transition: all .5s ease; 
 
} 
 
.inside { 
 
    height: 0rem; 
 
    margin-top: 3rem; 
 
    background-color: #be6666; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-size: 1.2rem; 
 
    padding: 0 5px; 
 
} 
 
.content { 
 
    margin-top: 2rem; 
 
    margin-left: 2rem; 
 
    display: flex; 
 
} 
 
.opened { 
 
    height: 13rem; 
 
    transition: all .5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="margin-left:1rem;margin-right:1rem"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

要擴展一個盒子，遍歷所有箱子和摺疊其他的。這可以使用$('.box').each來實現。對擴展框的引用保存在回調函數之外，並與每個迭代框進行比較。您可以使用此參考來確定哪個不會摺疊。

$('.box').click(function() { 
 
    var clicks = $(this).data('clicks'); 
 

 
    if (clicks) { 
 
    //odd click 
 
    $(this).animate({ 
 
     height: '3rem' 
 
    }, 500); 
 

 
    } else { 
 
    //even click 
 
    $(this).animate({ 
 
     height: '13rem' 
 
    }, 500); 
 

 
    // close any open boxes other than the expanding on 
 
    var box = this; 
 
    $('.box').each(function(index, element) { 
 
     if (box != element) { 
 
     $(element).animate({ 
 
      height: '3rem' 
 
     }, 500); 
 
     $(element).data("clicks", 0); 
 
     } 
 
    }); 
 
    } 
 

 
    $(this).data("clicks", !clicks); 
 
});

.box { 
 
    height: 3rem; 
 
    width: 10rem; 
 
    background-color: #be6666; 
 
    overflow: hidden; 
 
} 
 
.inside { 
 
    height: 0rem; 
 
    margin-top: 3rem; 
 
    background-color: #be6666; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-size: 1.2rem; 
 
    padding: 0 5px; 
 
} 
 
.content { 
 
    margin-top: 2rem; 
 
    margin-left: 2rem; 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="margin-left:1rem;margin-right:1rem"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
</div>

---

編輯我不知道，這完全是猶太，但我喜歡@Kind用戶的基於CSS的方法，並用另一種解決方案上來。這種方法保持代碼「精益和平均」，但也保留了「點擊關閉」功能。

反正，道具給@Kind用戶。

$('.box').click(function() { 
 
    
 
    // toggle open/close 
 
    if ($(this).is(".opened")) { 
 
    $(this).removeClass("opened") 
 
    } else { 
 
    $(this).addClass("opened") 
 
    
 
    // close others 
 
    var box = this; 
 
    $('.box') 
 
     .filter(function(index, element) { 
 
     return element != box; 
 
     }) 
 
     .removeClass("opened"); 
 
    } 
 
});

.box { 
 
    height: 3rem; 
 
    width: 10rem; 
 
    background-color: #be6666; 
 
    overflow: hidden; 
 
    transition: all .5s ease; 
 
} 
 
.inside { 
 
    height: 0rem; 
 
    margin-top: 3rem; 
 
    background-color: #be6666; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-size: 1.2rem; 
 
    padding: 0 5px; 
 
} 
 
.content { 
 
    margin-top: 2rem; 
 
    margin-left: 2rem; 
 
    display: flex; 
 
} 
 
.opened { 
 
    height: 13rem; 
 
    transition: all .5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="margin-left:1rem;margin-right:1rem"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

可以存儲的狀態信息的屬性來選擇它打開/關閉。 jQuery允許按屬性選擇並自動爲每個選定元素運行函數。

function openOrClose(o, open) { 
 
    o.animate({ 
 
    height: open ? '13rem' : '3rem' 
 
    }, 500); 
 
    o.attr('data-state', open ? 'open' : 'closed'); 
 
} 
 

 
$('.box').click(function() { 
 
    if($(this).attr('data-state') != 'open') { 
 
    // a click on a closed box 
 
    
 
    // close the open boxes 
 
    openOrClose($('.box[data-state=open]'), false); 
 
    
 
    // open 'this' 
 
    openOrClose($(this), true); 
 
    }else{ 
 
    // a click on an already open box 
 
    // so close it 
 
    openOrClose($(this), false); 
 
    } 
 
});

.box { 
 
    height: 3rem; 
 
    width: 10rem; 
 
    background-color: #be6666; 
 
    overflow: hidden; 
 
} 
 
.inside { 
 
    height: 0rem; 
 
    margin-top: 3rem; 
 
    background-color: #be6666; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-size: 1.2rem; 
 
    padding: 0 5px; 
 
} 
 
.content { 
 
    margin-top: 2rem; 
 
    margin-left: 2rem; 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="margin-left:1rem;margin-right:1rem"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="inside"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto consequatur, tempora veritatis</p> 
 
    </div> 
 
    </div> 
 
</div>