Javascript 激活时导航栏边框中断

我有一个简单的菜单，在页面的左边。左边是CSS，右边是，给边框

代码：

当我点击我的菜单时，我想在我点击的地方断线

在负号处，右棕色边框应断开，并为其提供白色背景/透明 ，我希望它是透明的。。只有那一部分。我的导航栏上有活跃的课程。 为了更好的例子，我添加了一张照片

正如你所看到的，在底部我添加了一个例子（在代码中它显示了完整的一行），在导航栏上的减号，我想要空白！。。。可能吗

添加以更好地理解问题

---

谢谢大家。

放置一个环绕导航栏项目的div，并将其位置设置为相对，高度和宽度根据需要设置，z索引设置为5，导航栏项目本身设置为z索引6，背景色设置为白色。然后，单击导航栏项目时，将该div设置为右侧动画。它将让您控制覆盖白线的位置、时间和方式。

类似的内容

HTML:

Jquery：

$(document).ready(function(){
    $('.Solutions > div').click(function(){
        $('.Solutions > div').removeClass('current');
        $(this).addClass('current');
    });    
});

---

jsfiddle上的示例：

这个宽度是怎么回事？int不够吗？您是否尝试过使用透明边框…或者这太明显了？效果很好，您有想法如何在该类上添加效果？如果您正在寻找类似动画的内容，您可以使用css3，例如，不透明度和1秒过渡：

<div class="navbar_left">
<h1>Our Solutions</h1>
<div class="Solutions">
    <div>
        <span>Solution 1</span>
        <div class='break_line'></div>
    </div> 
    <div>
        <span>Solution 2</span>
        <div class='break_line'></div>
    </div>
    <div>
        <span>Solution 3</span>
        <div class='break_line'></div>
    </div> 
</div>

.navbar_left
{
    position: relative;
    float:left;
    width: 28.45982142857143%;
    height:auto;
    border-right: 2px solid #442a19;    
}

.Solutions > div
{
    padding: 20px 10px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    position: relative;
}

.Solutions > div.current
{
    background: #fff;
}

.Solutions > div .break_line
{
    display: none;
}

.Solutions > div.current .break_line
{
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 9999;
    width: 2px;
    height: 100%;
    background: inherit;
}

$(document).ready(function(){
    $('.Solutions > div').click(function(){
        $('.Solutions > div').removeClass('current');
        $(this).addClass('current');
    });    
});