放入单独的 div 后，如何从菜单中展开 div（可折叠）？

Question

我一直在努力学习编码，但并不精通。 初学者在这里。

我创建了一个菜单，其中包含一些可拖动和可折叠的 div，我希望它们在我放入另一个框区域时展开（类似于小部件）。 我已经编写了代码，但我无法使其工作。

有没有办法做到这一点？

HTML

<div id="box1" class="box1">

      <div class = "widget" draggable="true" id="widget1">
        <div class="collapsible" ondragstart="event.dataTransfer.setData('text/plain',null)">widget1<span class="close"> &times;</div>
          <div class="content">
            Choose the content... <br/>
            Place everything here <br/>
          </div>
        </div>
      </div>

    <div id="box2" class="box2" class= "notcollapsible">
    </div>

JS

document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      event.preventDefault();

      // move dragged elem to the selected drop target
      if ( event.target.className == "box2" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );

          var content = this.nextElementSibling;

      //trying to expand next </div class= "content"> but I am unable to//

          if (content.style.display === "block") {
                content.style.display = "none";
              } else {
                content.style.display = "block";
          }            
      }
    
  }, false);

任何帮助将不胜感激，谢谢...

Answer 1

太棒了，你开始编码了，欢迎来到社区。

你可以看看使用 CSS flexbox：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

一个 flex div 可以随着放置在里面的内容而增长