javascript - 如何在单击另一个时隐藏CSS

Question

我想在不使用 jquery 的情况下单击绿色箭头时隐藏黑色箭头

我的 fiddle : http://jsfiddle.net/t5Nf8/195/

html:

<div class="arrow-down"></div>
<div class="arrow-up"></div>

CSS:

.arrow-down {
    position: absolute;
    /*display: none;*/
    left: 1.5px;
    top: 6px;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0ef2c4;
    cursor: pointer;
}
.arrow-up {
    border-color: transparent transparent black;
    border-style: dashed dashed solid;
    border-width: 0px 8.5px 8.5px;
    position: absolute;
    left: 1.5px;
    top: 14px;
    z-index: 1;
    height: 0px;
    width: 0px;
}

js:

$('.arrow-up').click(function {
    $('.arrow-down').hide();
});

请大家帮忙

Answer 1

$('.arrow-down').click(function(){
             $('.arrow-up').toggle();       
   });

$('.arrow-up').click(function(){
             $('.arrow-down').toggle();       
   });

1. You had a syntax error in your Code after function you should have () which you missed in your Code
2. I Have used toggle so that it shows and hides but you can use hide alone if you want.

DEMO