css 使虚线动态，同时有完整的展开-折叠

noj0wjuj 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(127)

如何使虚线动态，同时保持其他功能（单击set 1或set 2时的展开-折叠按钮）不变。不希望虚线位于数据下方。这样它就像数据之间的连接器一样开始和结束。显示相同的小提琴：https://jsfiddle.net/vcjzn5hs/1/
会很感激你的建议。
我能够使动态虚线和展开-折叠独立工作，但不能一起工作。供您参考：动态虚线应如何为http://jsfiddle.net/bwpugnd3/11/的示例。但是这个例子不能和展开折叠按钮一起工作。
代码片段：

.flex {
  display: flex;
  justify-content: space-between;
}

.lev1,
.lev2,
.lev3 {
  position: relative;
  margin-top: 5px;
  margin-left: 15px;
}

.lev1::after,
.lev2::after,
.lev3::after {
  content: '';
  position: absolute;
  width: 80%;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 6px;
  height: 2px;
  color: lightgrey;
  margin-bottom: 4px;
  background-image: linear-gradient(to right, currentColor 2px, transparent 1px);
  background-size: 4px 2px;
}

.DataRightAlign {
  word-wrap: break-word;
  white-space: break-spaces;
  margin-right: 20px;
  margin-left: 10px;
  color: black;
}

<!--jquery and bootstrap-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="itemDiv">
  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item1data</span>
        <span class="DataRightAlign"> Set1val here</span>
      </p>
    </div>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item2</span>
        <span class="DataRightAlign">Set1</span>
      </p>
    </div>
  </div>

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
    <div class="collapse multi-collapse lev3 show">
      <p class="flex">
        <span>item3</span>
        <span class="DataRightAlign">Set2val</span>
      </p>
    </div>
  </div>

css

来源：https://stackoverflow.com/questions/76194171/make-the-dotted-lines-dynamic-while-having-expand-collapse-intact

2条答案

按热度按时间

pjngdqdw1#

一种方法，坦率地说是最简单的，是下面的代码中的解释性注解;请注意，我从你自己的演示中删除了所有的CSS，因为它使创建演示稍微容易一些，但是-当然-没有什么可以阻止你添加自己的CSS回来：

/* a simple CSS reset to ensure the browser uses the same sizing
   algorithm for element sizes; including the width and padding
   within the declared sizes, also removing default margins
   and padding: */
body {
  block-size: 100vh;
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

.itemDiv {
  /* setting the inline-size of the element; inline-size is the axis
     on which inline-content (such as <span> elements) is laid out,
     and is perpendicular to the block-axis. In English the inline-axis
     is the horizontal axis running left-to-right. The clamp() function
     sets the preferred size of the element to 90%, with a 30rem
     minimum-size and 1100px maximum size: */
  inline-size: clamp(30rem, 90%, 1100px);
  /* centering the element on the inline-axis: */
  margin-inline: auto;
}

.flex {
  display: flex;
  gap: 0.5rem;
  /* spacing the elements out: */
  justify-content: space-between;
}

/* using the second span (noted in the HTML) to contain the line leading: */
.flex > span:nth-child(2) {
  background-image:
    /* using a repeating-linear-gradient() as the background-image: */
    repeating-linear-gradient(
      /* 90degrees causes the gradient to run horizontally, from an
         origin on the left side: */
      90deg,
      /* currentColor is the currently-assigned color of the element, this
         runs from 0 to 2px: */
      currentColor 0 2px,
      /* and we switch to a transparent "color" which starts at 2px and
         runs for 3px until a point at 5px: */
      transparent 2px 5px
    );
  /* positioning the repeating-linear-gradient() at 0 on the inline axis,
     and at 100% minus 5px on the block-axis; 5px is something of a magic
     number to line the dots of the background image to the approximate
     baseline of the text in the adjacent elements: */
  background-position: 0 calc(100% - 5px);
  /* preventing the background from repeating: */
  background-repeat: no-repeat;
  /* setting the size of the background-image to be 100% of the width/inline-axis,
     and 2px on the vertical/block-axis: */
  background-size: 100% 2px;
  /* this causes the element to grow to fill all available space: */
  flex-grow: 1;
}

.accordion-button {
  /* if an element can be clicked, and is interactive, I tend to assign the
     following property and property-value to indicate that interactivity: */
  cursor: pointer;
}

<!--jquery and bootstrap-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!--html -->
<div class="itemDiv">

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item1data</span>
        <!-- I feel bad about it, but the easiest way is to add an element to hold
             the leading: -->
        <span></span>
        <span class="DataRightAlign"> Set1val here</span>
      </p>
    </div>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item2</span>
        <span></span>
        <span class="DataRightAlign">Set1</span>
      </p>
    </div>
  </div>

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
    <div class="collapse multi-collapse lev3 show">
      <p class="flex">
        <span>item3</span>
        <span></span>
        <span class="DataRightAlign">Set2val</span>
      </p>
    </div>
  </div>
  
</div>

JS Fiddle demo。
另一种方法是使用CSS生成的内容来保持前导（位于项目数据和设置值之间的点），但这有问题;同样，代码中有解释性注解：

/* a simple CSS reset to ensure the browser uses the same sizing
   algorithm for element sizes; including the width and padding
   within the declared sizes, also removing default margins
   and padding: */
body {
  block-size: 100vh;
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

.itemDiv {
  /* setting the inline-size of the element; inline-size is the axis
     on which inline-content (such as <span> elements) is laid out,
     and is perpendicular to the block-axis. In English the inline-axis
     is the horizontal axis running left-to-right. The clamp() function
     sets the preferred size of the element to 90%, with a 30rem
     minimum-size and 1100px maximum size: */
  inline-size: clamp(30rem, 90%, 1100px);
  /* centering the element on the inline-axis: */
  margin-inline: auto;
}

.flex {
  display: flex;
  gap: 0.5rem;
  /* spacing the elements out: */
  justify-content: space-between;
}

.flex > span:first-child {
  /* here we use display: contents, which emulates "unwrapping" of the content
     from the matched element, and placing it directly into its parent-element;
     this means that both the <span> content and the ::after pseudo-element can
     take part in the flex layout, acting as siblings: */
  display: contents;
}

/* using the second span (noted in the HTML) to contain the line leading: */
.flex > span:first-child::after {
  background-image:
    /* using a repeating-linear-gradient() as the background-image: */
    repeating-linear-gradient(
      /* 90degrees causes the gradient to run horizontally, from an
         origin on the left side: */
      90deg,
      /* currentColor is the currently-assigned color of the element, this
         runs from 0 to 2px: */
      currentColor 0 2px,
      /* and we switch to a transparent "color" which starts at 2px and
         runs for 3px until a point at 5px: */
      transparent 2px 5px
    );
  /* positioning the repeating-linear-gradient() at 0 on the inline axis,
     and at 100% minus 5px on the block-axis; 5px is something of a magic
     number to line the dots of the background image to the approximate
     baseline of the text in the adjacent elements: */
  background-position: 0 calc(100% - 5px);
  /* preventing the background from repeating: */
  background-repeat: no-repeat;
  /* setting the size of the background-image to be 100% of the width/inline-axis,
     and 2px on the vertical/block-axis: */
  background-size: 100% 2px;
  content: '';
  /* this causes the element to grow to fill all available space: */
  flex-grow: 1;
}

.accordion-button {
  /* if an element can be clicked, and is interactive, I tend to assign the
     following property and property-value to indicate that interactivity: */
  cursor: pointer;
}

<!--jquery and bootstrap-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!--html -->
<div class="itemDiv">

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item1data</span>
        <span class="DataRightAlign"> Set1val here</span>
      </p>
    </div>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item2</span>
        <span class="DataRightAlign">Set1</span>
      </p>
    </div>
  </div>

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
    <div class="collapse multi-collapse lev3 show">
      <p class="flex">
        <span>item3</span>
        <span class="DataRightAlign">Set2val</span>
      </p>
    </div>
  </div>
  
</div>

JS Fiddle demo。
不幸的是，使用：

.flex > span:first-child {
  display: contents;
}

意味着我们不能再使用background-color或border等样式化元素;这是这种方法不可避免的后果。
最后，虽然，想到比我想的要晚，我们可以选择嵌套flex-layout，如下所示：

/* a simple CSS reset to ensure the browser uses the same sizing
   algorithm for element sizes; including the width and padding
   within the declared sizes, also removing default margins
   and padding: */
body {
  block-size: 100vh;
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

.itemDiv {
  /* setting the inline-size of the element; inline-size is the axis
     on which inline-content (such as <span> elements) is laid out,
     and is perpendicular to the block-axis. In English the inline-axis
     is the horizontal axis running left-to-right. The clamp() function
     sets the preferred size of the element to 90%, with a 30rem
     minimum-size and 1100px maximum size: */
  inline-size: clamp(30rem, 90%, 1100px);
  /* centering the element on the inline-axis: */
  margin-inline: auto;
}

.flex {
  display: flex;
  gap: 0.5rem;
  /* spacing the elements out: */
  justify-content: space-between;
}

.flex > span:first-child {
  /* we assign display: flex to the element, this causes it to lay its
     own children out according to the flex layout properties: */
  display: flex;
  /* this causes the element to grow to fill all available space within
     its parent: */
  flex-grow: 1;
  /* we inherit the gap property from the parent, so that the gaps here
     are the same as the gaps between this element and its sibling(s): */
  gap: inherit;
}

.flex > span:first-child::after {
  /* again, using the background image to create the leading: */
  background-image:
    /* using a repeating-linear-gradient() as the background-image: */
    repeating-linear-gradient(
      /* 90degrees causes the gradient to run horizontally, from an
         origin on the left side: */
      90deg,
      /* currentColor is the currently-assigned color of the element, this
         runs from 0 to 2px: */
      currentColor 0 2px,
      /* and we switch to a transparent "color" which starts at 2px and
         runs for 3px until a point at 5px: */
      transparent 2px 5px
    );
  /* positioning the repeating-linear-gradient() at 0 on the inline axis,
     and at 100% minus 5px on the block-axis; 5px is something of a magic
     number to line the dots of the background image to the approximate
     baseline of the text in the adjacent elements: */
  background-position: 0 calc(100% - 5px);
  /* preventing the background from repeating: */
  background-repeat: no-repeat;
  /* setting the size of the background-image to be 100% of the width/inline-axis,
     and 2px on the vertical/block-axis: */
  background-size: 100% 2px;
  content: '';
  /* as with the parent element, we use flex-grow to allow the pseudo-element
     to grow to fill the available space: */
  flex-grow: 1;
}

.accordion-button {
  /* if an element can be clicked, and is interactive, I tend to assign the
     following property and property-value to indicate that interactivity: */
  cursor: pointer;
}

<!--jquery and bootstrap-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!--html -->
<div class="itemDiv">

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item1data</span>
        <span class="DataRightAlign"> Set1val here</span>
      </p>
    </div>
    <div class="collapse multi-collapse lev1 show">
      <p class="flex">
        <span>item2</span>
        <span class="DataRightAlign">Set1</span>
      </p>
    </div>
  </div>

  <div>
    <a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
    <div class="collapse multi-collapse lev3 show">
      <p class="flex">
        <span>item3</span>
        <span class="DataRightAlign">Set2val</span>
      </p>
    </div>
  </div>
  
</div>

JS Fiddle demo。
参考文献：

赞(0）回复(0）举报 2023-05-08

hkmswyz62#

这有点像CSS样式的目录
基本的想法是把content: '...很长，使溢出隐藏，使左侧文本和右侧文本的div背景白色，所以这些点将不会在右侧文本或左侧文本之后或之下可见，但实际上是为整行绘制的虚线。
height: 40px和top: -42px修复虚线移动到略低于左侧文本和右侧文本
z-index: -1;使虚线隐藏在右侧文本和左侧文本后面

.toc {
overflow: hidden;
height: 40px;
}

.toc::after {
content: '................................................................................................................................................................';
overflow: hidden;
position: relative;
display: block;
left: 0;
top: -42px;
z-index: -1;
}
.toc-title {
background-color: #fff;
padding-right: 1%;
}
.toc-section {
background-color: #fff;
padding-left: 1%;
float: right;
}

<!--jquery and bootstrap-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<h1> Individual accordion collapse </h1>
<br/>
<div style="line-height: 40px">
<h4 style="font-weight: 700" class="accordion-button" data-toggle="collapse" data-target=".lev1">Chapter 1: Some Chapter 1</h4>
<div style="font-size: 25px;" class="collapse multi-collapse lev1 show">
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 1</span>
        <span class="toc-section">Section 1</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 2</span>
        <span class="toc-section">Section 2</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 3</span>
        <span class="toc-section">Section 3</span>
    </div>
  </div>
</div>
<h4 style="font-weight: 700" class="accordion-button" data-toggle="collapse" data-target=".lev2">Chapter 2: Some Chapter 2</h4>
<div style="font-size: 25px;" class="collapse multi-collapse lev2 show">
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 1</span>
        <span class="toc-section">Section 1</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 2</span>
        <span class="toc-section">Section 2</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 3</span>
        <span class="toc-section">Section 3</span>
    </div>
  </div>
</div>
</div>
<br/>
<h1> Both accordion collapse </h1>
<br/>
<div style="line-height: 40px">
<h4 style="font-weight: 700" class="accordion-button" data-toggle="collapse" data-target=".lev3">Chapter 1: Some Chapter 1</h4>
<div style="font-size: 25px;" class="collapse multi-collapse lev3 show">
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 1</span>
        <span class="toc-section">Section 1</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 2</span>
        <span class="toc-section">Section 2</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 3</span>
        <span class="toc-section">Section 3</span>
    </div>
  </div>
</div>
<h4 style="font-weight: 700" class="accordion-button" data-toggle="collapse" data-target=".lev3">Chapter 2: Some Chapter 2</h4>
<div style="font-size: 25px;" class="collapse multi-collapse lev3 show">
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 1</span>
        <span class="toc-section">Section 1</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 2</span>
        <span class="toc-section">Section 2</span>
    </div>
  </div>
  <div>
    <div class="toc">
        <span class="toc-title">Some Title 3</span>
        <span class="toc-section">Section 3</span>
    </div>
  </div>
</div>
</div>

赞(0）回复(0）举报 2023-05-08

我来回答

css 使虚线动态，同时有完整的展开-折叠

2条答案

相关问题

热门标签

最新问答