Question

如何使切换大小与孩子相同？

这是一棵家谱，由于名称的长度，我为min-width添加了min-height和.tree li a。

如何使Togglable 1的父级与子级或标签相同？

function toggleDocs(event) {
var next = event.target.nextElementSibling;
if (next.style.display == "none") {
  next.style.display = "block";

} else {
  next.style.display = "none";
}
  }
  document.addEventListener('click', toggleDocs, true);

body {
      font-family: sans-serif;
      font-size: 15px;
    }

    .tree {
      transform: rotate(0deg);
      transform-origin: 50%;
    }

    .tree ul {
      position: relative;
      padding: 1em 0;
      white-space: nowrap;
      margin: 0 auto;
      text-align: center;
    }

    .tree ul::after {
      content: '';
      display: table;
      clear: both;
    }

    .tree li {
      display: inline-block;
      vertical-align: top;
      text-align: center;
      list-style-type: none;
      position: relative;
      padding: 1em 0.5em 0 0.5em;
    }

    .tree li::before,
    .tree li::after {
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      border-top: 5px solid blue;
      width: 50%;
      height: 1em;
    }

    .tree li::after {
      right: auto;
      left: 50%;
      border-left: 5px solid red;
    }

    .tree li:only-child::after,
    .tree li:only-child::before {
      display: none;
    }

    .tree li:only-child {
      padding-top: 0;
    }

    .tree li:first-child::before,
    .tree li:last-child::after {
      border: 0 none;
    }

    .tree li:last-child::before {
      border-right: 5px solid green;
      border-radius: 0 5px 0 0;
    }

    .tree li:first-child::after {
      border-radius: 5px 0 0 0;
    }

    .tree ul ul::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      border-left: 5px solid cyan;
      width: 0;
      height: 1em;
    }

    .tree li a {
      min-width: 16em;
      min-height: 5em;
      border: 1px solid #ccc;
      padding: 0.5em 0.75em;
      text-decoration: none;
      display: inline-block;
      border-radius: 5px;
      color: #333;
      position: relative;
      top: 1px;
      transform: rotate(0deg);
    }

    .tree li a:hover,
    .tree li a:hover+ul li a {
      background: #e9453f;
      color: #fff;
      border: 1px solid #e9453f;
    }

    .tree li a:hover+ul li::after,
    .tree li a:hover+ul li::before,
    .tree li a:hover+ul::before,
    .tree li a:hover+ul ul::before {
      border-color: #e9453f;
    }

    .toggle-fffff {
      /* DON'T USE DISPLAY NONE/BLOCK! Instead: */
      background: #cf5;
      padding: 10px;
      position: inherit;
      opacity: 0.4;
      transition: 0.6s;
      -webkit-transition: 0.6s;
      transform: translateY(-20%);
      -webkit-transform: translateY(-20%);
    }

    .toggle-c {
      background: #cf5;
      position: inherit;
      opacity: 1;
      transform: translateX(0);
      -webkit-transform: translateX(0);
    }

    .clickable-heading {
      cursor: pointer;
    }

<body>

  <div class="row">
    <div class="col-sm-12 text-center tree">
      <ul>
        <li class="clickable-heading">
          <a class="sss" href="#">parent</a>
          <div class="toggle-c" style="display:none">Togglable 1</div>
          <ul>
            <li class="clickable-heading">
              <a href="#">boy</a>
              <div class="toggle-c" style="display:none">Togglable 2</div>
            </li>
            <li class="clickable-heading">
              <a href="#">girl</a>
              <div class="toggle-c" style="display:none">Togglable 3</div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <body>

Answer 1

您可以添加一个div作为父级的容器，并为其应用display：table样式，以便仅获取其子级的宽度和高度：

void funcion_productor(int productor_i)
{ 
  int b = 4;
  for ( unsigned int i= 0 ; i < num_items ; i++ )
  {
    // producir valor
    int valor_prod = producir(productor_i);
    // enviar valor
    cout << "Productor " << productor_i << " va a enviar valor " << 
    valor_prod << endl << flush;
    MPI_Ssend( &valor_prod, 1, MPI_INT, id_buffer, 0, MPI_COMM_WORLD );
    }
}

它在stackbliz上-https://stackblitz.com/edit/js-49efam?file=index.html

希望这会有所帮助！

切换时树形结构的父位置css

1 个答案: