如果單擊圓圈，如何將圓圈與線條垂直連接起來，它應該用顏色填充

Question

如果用戶單擊列表項，圓圈應該用顏色填充，我想創建如下圖所示的結構，其中包含無序列表項。 我在 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;
    }

查詢

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

Answer 1

在這里，您需要根據 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>

Answer 2

 jQuery("li").click(function() { jQuery(this).toggleClass("active"); jQuery(this).siblings().removeClass("active"); });

 body { margin:0; padding:0;} .container { width: 600px; } .shop-all .product-content ul li { position:relative; font-family: 'Lato'; font-size: 16px; font-weight: bold; padding: 10px 0 10px 0; cursor: pointer; line-height:16px;} .shop-all .product-content ul li span { border-radius: 50%; border: 1px solid #d95d5d; padding: 0 10px; margin-right: 10px; background-color:#fff; } .shop-all .product-content ul li.active span { background-color: #d95d5d; } .shop-all .product-content ul li.active { 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/3.3.1/jquery.min.js"></script> <div class="container"> <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> </div>

Answer 3

由於您已經為 span 創建了filled類，因此您必須嘗試以下方式。 所以改變

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

到

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

演示在這里

Answer 4

嘗試這個..

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

 body { margin:0; padding:0;} .container {width: 600px;} .shop-all .product-content ul li { position:relative; font-family: 'Lato'; font-size: 16px; font-weight: bold; padding: 10px 0 10px 0; cursor: pointer; line-height:16px;} .shop-all .product-content ul li span { border-radius: 50%; border: 1px solid #d95d5d; padding: 0 10px; margin-right: 10px; background-color:#fff; } .shop-all .product-content ul li.filled span { 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/3.3.1/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>