时间戳

首页 > 解决方案 > 如果单击圆圈，如何将圆圈与线垂直连接，它应该填充颜色

javascript - 如果单击圆圈，如何将圆圈与线垂直连接，它应该填充颜色

问题描述

如果用户单击列表项，圆圈应该用颜色填充，我想创建如下图所示的结构和无序列表项。我在 div 里面创建了列表项和列表跨度元素。我用户点击第一个列表项，如果我点击另一个列表，圆圈应该填充颜色，然后它应该填充颜色，就像活动或关注链接在菜单栏中

这是我必须实现的目标 这是我想要实现的目标

这是我尝试过的

    <div class="sizes">
    <ul>
      <li class="dot"><span></span>6"x6" | 599</li>
      <li class="dot"><span></span>12"x12" | 799</li>
      <li class="dot"><span></span>12"x18" | 999</li>
      <li class="dot"><span></span>18"x12" | 799</li>
      <li class="dot"><span></span>16"x20" | 1,399</li>
    </ul>
</div>

css

.shop-all .product-content ul li {
    position:relative;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer;}

    .shop-all .product-content ul li span {
      border-radius: 50%;
      border: 1px solid #d95d5d;
      padding: 2px 10px;
      margin-right: 10px;
      background-color:#fff;
    }

    .shop-all .product-content ul li span.filled {
        background-color: #d95d5d;
    }

    .shop-all .product-content ul li span:before{
      content:'';
      position:absolute;
      border-left:1px solid #d95d5d;
      top:10px;
      z-index: -1;
      height: 92%;
    }

    .shop-all .product-content ul li:last-child span:before{
     content:none;
    }
     .shop-all .product-content ul li:last-child{
      padding-bottom:0
    }

    .shop-all .product-content ul {
      list-style: none;
    }

jQuery

$('.dot').on('click', function(){
  $(this).toggleClass('filled');
});

标签： javascriptjqueryhtmlcss

解决方案

在这里，您需要根据 css 在 html 上添加类并在 jquery 下使用

$('.dot').on('click', function(){
  $('.dot').children('span').removeClass('filled');
  $(this).children('span').toggleClass('filled');
});
.shop-all .product-content ul li {
    position:relative;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer;}

    .shop-all .product-content ul li span {
      border-radius: 50%;
      border: 1px solid #d95d5d;
      padding: 2px 10px;
      margin-right: 10px;
      background-color:#fff;
    }

    .shop-all .product-content ul li span.filled {
        background-color: #d95d5d;
    }

    .shop-all .product-content ul li span:before{
      content:'';
      position:absolute;
      border-left:1px solid #d95d5d;
      top:10px;
      z-index: -1;
      height: 92%;
    }

    .shop-all .product-content ul li:last-child span:before{
     content:none;
    }
     .shop-all .product-content ul li:last-child{
      padding-bottom:0
    }

    .shop-all .product-content ul {
      list-style: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="shop-all">
 <div class="product-content">
    <ul>
      <li class="dot"><span></span>6"x6" | 599</li>
      <li class="dot"><span></span>12"x12" | 799</li>
      <li class="dot"><span></span>12"x18" | 999</li>
      <li class="dot"><span></span>18"x12" | 799</li>
      <li class="dot"><span></span>16"x20" | 1,399</li>
    </ul>
</div>
</div>

推荐阅读