Question

我想在点击绿色箭头时隐藏黑色箭头..不使用jquery

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

var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];

downArrow.addEventListener('click', function() {
  upArrow.style.display = upArrow.style.display !== 'none' ? 'none' : 'block';
});

http://jsfiddle.net/t5Nf8/197/

Answer 2

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

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

您应该在function后的代码中出现语法错误   您在代码中遗漏的()

我曾经使用过切换显示和隐藏，但如果你愿意，可以单独使用隐藏。

DEMO

Answer 3

根据@ JoeFitter的回答，你可以切换＆＃34; upArrow＆＃34;通过点击＆＃34; downArrow＆＃34;来显示和隐藏使用JavaScript

var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];

downArrow.addEventListener('click', function() {
    if(upArrow.style.display == 'none'){
        upArrow.style.display = 'block';
    }

    else{
        upArrow.style.display = 'none';
    }
});

<强> Live Demo

Answer 4

使用getComputedStyle(el).getPropertyValue("display");获取显示的值，之后，您只需进行测试即可显示或隐藏箭头！

注意：这是一个纯粹的Javascript，没有库：

var display = getComputedStyle(up).getPropertyValue("display");
if ( display !== "block" ) {
    up.style.display = 'block';
} else {
    up.style.display = 'none';
}

想要观看它吗？请参阅演示：http://jsfiddle.net/g4g9doj0/

Answer 5

我不认为这是一个简单的任务只是使用CSS，使用Jquery应该是这样的：

我不知道，但我看到无用的CSS说明，我认为可以减少到：

.arrow-down {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
height: 0px;
width: 0px;

}

.arrow-up{
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0ef2c4;
    cursor: pointer;
}

Jquery看起来像：

    $(document).ready(function(){
    $(".arrow-up").click(function(){
        $(".arrow-down").hide();
    });
});

http://jsfiddle.net/t5Nf8/209/

如何在点击另一个时隐藏css

5 个答案: