किसी दिए गए div के ठीक नीचे एक div कैसे बनाएं, लेकिन पृष्ठ में अन्य सभी divs के शीर्ष पर अपनी स्थिति को स्थानांतरित किए बिना? यहाँ एक उदाहरण है:

  ---------------------------------------------
  |               |          |                |
  |    div1       |   div2   |         div3   |
  |               |          |                |
  ---------------------------------------------
  |                     |                     |
  |    div4             |         div5        |
  |                     |                     |    
  ---------------------------------------------
  |... some more divs...

मैं डिव 2 के ऑनक्लिक हैंडलर में एक डिव बनाना चाहता हूं, ताकि जब डिव 2 पर क्लिक किया जाए, तो नव निर्मित डिव प्रदर्शित किया जाएगा जो डिव 2 से संरेखित है, डिव 2 से नीचे है लेकिन नीचे अन्य डिव के शीर्ष पर है। पृष्ठ का नया स्वरूप होगा:

  ---------------------------------------------
  |               |          |                |
  |    div1       |   div2   |         div3   |
  |               |          |                |
  ---------------------------------------------
  |               |                  |        |
  |    div4       |     Newly        |  div5  |
  |               |     Created      |        | 
  -----------------     Div          ----------
  | ...some more..|                  |        | 
  |  ...divs...   |                  |        | 
  |               |                  |        | 
  |               |                  |        | 
  |               |                  |        | 
  ---------------------------------------------

समाधान सामान्य होना चाहिए। उदाहरण के लिए, जावास्क्रिप्ट फ़ंक्शन होगा:

 createDivBelow(css selector, height, width)

तो, किसी भी div के css चयनकर्ता को देखते हुए, फ़ंक्शन इसके नीचे एक div बनाएगा, बाएं संरेखित और निर्दिष्ट ऊंचाई और चौड़ाई का। महत्वपूर्ण मुद्दा यह है कि इसे तैनात किया जाना चाहिए ताकि नीचे या अन्य जगहों पर अन्य divs स्थानांतरित न हों। नव निर्मित div शीर्ष पर होना चाहिए। मुझे लगा कि नया डिव पूरी तरह से स्थित होना चाहिए, संभवतः शरीर के संबंध में। लेकिन कैसे पता करें कि इसे कहां रखा जाए? आखिरकार, div2 को अन्य divs में एम्बेड किया जा सकता है।

कुछ टिप्पणियों और प्रस्तावित उपायों को संबोधित करने के लिए संपादित करें मुझे पृष्ठ की संरचना से बेखबर एक सामान्य समाधान की आवश्यकता है। समाधान को अन्य तत्वों के बारे में पता नहीं होना चाहिए, अकेले अन्य तत्वों के सीएसएस पर निर्भर होना चाहिए और div2 को कहीं भी रखा जा सकता है।

0
Sunny 31 मार्च 2018, 09:51

1 उत्तर

ऐसा लगता है कि आप नेविगेशन बार बनाना चाहते हैं। अंधा शॉट:

$("nav div").click(function () {
  if ($(this).data("menu")) {
    $(this).data("menu").remove();
    $(this).removeData("menu")
  } else {
    var t = this.offsetTop;
    var l = this.offsetLeft;
    var h = this.offsetHeight;
    $(this).data("menu",
      $("<div class=\"menu\">menu</div>")
      .appendTo(document.body)
      .css({ "left": l, "top": t + h})
    );
  }
});
body {
  position: relative;
  padding-top: 2em; /* test */
}
div {
  display: inline-block;
  border: 1px solid black;
  box-sizing: border-box;
}
nav div {
  width: 100px;
}
main div {
  width: 150px;
}
.menu {
  background: white;
  position: absolute;
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav><div>div 1</div><div>div 2</div><div>div 3</div></nav>
<main><div>div 4</div><div>div 5</div><main>
1
leaf 31 मार्च 2018, 08:10