Question

        .itinerary-item-span-a::before{
                display: block;
              height: 30px;
              width: 30px;
              text-align: center;
              vertical-align: middle;
              border-radius: 50%;
              background:green ;
              color: #fff;
              line-height: 30px;
              z-index: 1;
              position: relative;
        }



.itinerary-list-item ::after{
border-right: 2px dotted #000;
color: #434f29;
height: 100%;
content: "";
left: -98%;
position: absolute;
top: 16px;
width: 100%;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<ul uk-accordion>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 1</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 2</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li >
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 3</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

这段代码是在uikit框架中编写的。我想删除那条多余的虚线，并且在将其更新时，手风琴项目也会相应地显示出来。

当我打开手风琴时，它会显示内容和虚线。当我添加更多手风琴项目时，除了所有这些项目之外，还会显示一条虚线。当我添加更多手风琴项目时，虚线没有响应，它仅显示了一半。我想使虚线响应（请参见图片）。我想那样做。

Answer 1

希望这就是您想要的。根据需要调整边距

li div.uk-accordion-content{
border-left: 3px dotted red;
margin-top:0 ;
margin-left:14px
}

$(document).ready(function(){
  $(".uk-accordion-title").click(function(){ 
  $(".itinerary-list-item").removeClass("show")
  $(this).parents(".itinerary-list-item").toggleClass("show");
  });
});

.itinerary-item-span-a::before{
                display: block;
              height: 30px;
              width: 30px;
              text-align: center;
              vertical-align: middle;
              border-radius: 50%;
              background:green ;
              color: #fff;
              line-height: 30px;
              z-index: 1;
              position: relative;
        }


li div.uk-accordion-content{
border-left: 3px dotted red;
margin-top:0 ;
margin-left:14px
}

.uk-accordion li:last-child .uk-accordion-content{
border-left: none}

.uk-accordion li:before{
      content: "";
    border-left: 3px dotted red;
    position: absolute;
    /* top: 0; */
    width: 100px;
    height: 44px;
    left: 14px;
    /* bottom: 0px; */
    transform: translateY(0px);

}

.uk-accordion li.show:before{
display:none}

.uk-accordion li{position:relative}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<ul uk-accordion>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 1</a>
        <div></div>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 2</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li >
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 3</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

使用uikit的手风琴中的垂直虚线

1 个答案: