单击其他内容时静态、悬停、单击、鼠标移开

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>

单击其他内容时静态、悬停、单击、鼠标移开

static, hover, click, mouseout when you click on something else

javascript

onclick

hover

mouseover

mouseout