Jquery - jquery, css के साथ गतिशील रूप से दो तत्वों की ऊंचाई सेट अप करना

मेरे पास एक सेक्शन है - <section id="left_side"> //Some crap here.</section> और इस तरह एक अलग तत्व - <aside id="right_side"> //Some crap here.</aside>

मैं क्या करना चाहता हूं जब एक तरफ कंटेनर की ऊंचाई अनुभाग कंटेनर से अधिक हो, तो jQuery का उपयोग करके मैं इसे विस्तारित करना चाहता हूं और अलग कंटेनर के बराबर या बराबर होना चाहता हूं।

लेकिन, उसी समय यदि एक तरफ सेक्शन कंटेनर से छोटा है तो मैं इसे विस्तारित करना चाहता हूं और अनुभाग कंटेनर के बराबर होना चाहता हूं।

मुझे बिल्कुल नहीं पता कि jQuery का उपयोग करके इसे कैसे किया जाए।

उत्तर:

उत्तर № 1 के लिए 1
$(".section-container").on("adjustNeighbors", "#leftside,#rightside", function () {
var thisHeight = $(this).outerHeight();
var sectionToResize = $(this).is("#leftside") ? "#rightside" : "#leftside";

$(sectionToResize).css("height", thisHeight + "px");
});

और इसे इस तरह ट्रिगर करें ..

function someFunction(){
// some code that resized #leftside or #rightside
thatSection.trigger("adjustNeighbors");
}

जवाब के लिए 0 № 2
function resize_section_aside() {
var section = $("leftside"),
aside = $("rightside"),
section_height = section.height(),
aside_height = aside.height();
if( aside_height > section_height ) {
section.height( aside_height );  // re-size section to aside
} else {
aside.height( section_height );   // re-size aside to section
}
});
}

$(function() {
resize_section_aside();
});

उपरोक्त कोड पर आग लग जाएगी DOM भार खत्म करो। अगर आपको इसे आग लगाने के लिए किसी भी घटना की ज़रूरत है तो बस कॉल करें resize_section_aside() उस घटना हैंडलर के भीतर कार्य करें।


संबंधित सवाल
सबसे लोकप्रिय