静态，悬停，点击，鼠标离开当你点击其他东西

Question

我正在设计一个时间轴，当你把鼠标悬停在一个图像上时，它会变成另一个图像，当你点击它时，它会变成另一个图像。然后，当你点击时间轴的不同部分时，它会关闭你刚刚点击的部分。有人能帮我一下吗?

这是我到目前为止所做的。

HTML:

<div class="all-bullets">
    <div class="bulletPlayer">
        <a class="bulletOne"></a><br />
    </div>
    <div class="bulletPlayer">
        <a class="bulletTwo"></a><br />
    </div>
    <div class="bulletPlayer">
        <a class="bulletThree"></a><br />
    </div>
    <div class="bulletPlayer">
        <a class="bulletFour"></a><br />
    </div>
</div>

CSS:

.all-bullets {
display: inline-block;
vertical-align: top;
width: 492px;
margin-left: -41px;
margin-top: 140px;
}
.bulletPlayer {
position: relative;
z-index: 9999;
}

/* BULLET ONE*/
.bulletOne {
display: inline-block;
width: 500px;
height: 126px;
background: url(images/dotOneUpState.png) no-repeat left top;
}
.bulletOne:hover 
{
background: url(images/dotOneHoverState.png) no-repeat left top;
margin-left: -5px;
margin-top: -3px;
margin-bottom: 3px;
}
.bulletOne.active 
{
background: url(images/dotOneDownState.png) no-repeat left top;
margin-left: -5px;
margin-top: -3px;
margin-bottom: 3px;
}

/* BULLET TWO*/
.bulletTwo {
display: inline-block;
width: 500px;
height: 126px;
background: url(images/dotTwoUpState.png) no-repeat left top;
}
.bulletTwo:hover 
{
background: url(images/dotTwoHoverState.png) no-repeat left top;
margin-left: -3px;
margin-top: -3px;
margin-bottom: 3px;
}
.bulletTwo.active 
{
background: url(images/dotTwoDownState.png) no-repeat left top;
margin-left: -3px;
margin-top: -3px;
margin-bottom: 3px;
}


/* BULLET THREE*/
.bulletThree {
display: inline-block;
width: 500px;
height: 126px;
background: url(images/dotThreeUpState.png) no-repeat left top;
}
.bulletThree:hover 
{
background: url(images/dotThreeHoverState.png) no-repeat left top;
margin-left: -4px;
margin-top: -3px;
margin-bottom: 3px;
}
.bulletThree.active 
{
background: url(images/dotThreeDownState.png) no-repeat left top;
margin-left: -4px;
margin-top: -3px;
margin-bottom: 3px;
}

/* BULLET FOUR*/
.bulletFour {
display: inline-block;
width: 500px;
height: 123px;
background: url(images/dotFourUpState.png) no-repeat left top;
cursor: pointer;
}
.bulletFour:hover 
{
background: url(images/dotFourHoverState.png) no-repeat left top;
margin-left: -3px;
margin-top: -3px;
margin-bottom: 3px;
}
.bulletFour.active 
{
background: url(images/dotFourDownState.png) no-repeat left top;
margin-left: -3px;
margin-top: -3px;
margin-bottom: 3px;
}

Javascript:

$('.bulletOne').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}

});

$('.bulletTwo').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}
});
$('.bulletThree').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}
});
$('.bulletFour').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}
});

Answer 1

您需要遍历列表并禁用那些不应该是活动的。试试这个:

$(".bullet").click(function() { //Click function
    var selBullet = $(this), //Selected button
        bullets = document.getElementsByClassName("bullet"); //bullets nodeList
    selBullet.addClass("activeBullet"); //adding activeBullet class
    for(var i = bullets.length - 1; i >= 0; --i) { //iterate through all
        if(!selBullet.is($(bullets[i]))) { //check if same as selected
            $(bullets[i]).removeClass("activeBullet"); //if not, remove class
        }
    }
});

这将遍历所有项目符号的nodeList，然后删除不应该活动的项目符号上的活动类。下面是一个代码片段:

$(".bullet").click(function() {
    var selBullet = $(this),
    	bullets = document.getElementsByClassName("bullet");
    selBullet.addClass("activeBullet");
    for(var i = bullets.length - 1; i >= 0; --i) {
        if(!selBullet.is($(bullets[i]))) {
      	    $(bullets[i]).removeClass("activeBullet");
        }
    }
});

.bullet {
  color: red;
}
.activeBullet {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="b">
    <a class="bullet activeBullet">Test_1</a>
  </div>
  <div class="b">
    <a class="bullet">Test_2</a>
  </div>
  <div class="b">
    <a class="bullet">Test_3</a>
  </div>
</div>