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

Question

我想用无序的列表项创建如下图所示的结构，如果用户单击列表项，圆圈应该用颜色填充。我在div内部创建了一个列表项，并在list span元素内部创建。我用户点击第一个列表项目，圆圈应该填充颜色。如果我点击另一个列表，那么它应该填充颜色，就像激活或关注菜单栏中的链接一样

以下是我必须实现的目标以下是我想要实现的

以下是我尝试过的

<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');
});

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

试试这个。。

$('.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>

Answer 4

由于已经为span创建了filled类，因此必须尝试以下方法。所以改变

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

至

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

演示在这里