如何隱藏CSS的同時單擊另一個

我想隱藏黑色箭頭，而點擊綠色箭頭..不使用jQuery如何隱藏CSS的同時單擊另一個

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(); 
});

請人幫忙

來源

2015-05-08 appu

你能給我們一個你已經嘗試過，而不使用jQuery的例子嗎？因爲你當前的代碼包含jquery。 – Gerton

你不能。 CSS不知道點擊事件。你肯定會需要JS。你可以通過懸停來做到這一點 '.arrow-down：hover + .arrow-up { display：none; }' – LinkinTED

點擊瀏覽javascript.com。請求時提供您的代碼。請不要忽略代碼要求。 –

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/

來源

2015-05-08 13:06:05

當文檔準備好隱藏向下箭頭，如果我點擊箭頭的手段，向下箭頭顯示...我做了什麼 – appu

答案更新包括切換 - http://jsfiddle.net/t5Nf8/203/ –

它扔了一個錯誤downArrow未定義 – appu

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

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

你必須在你的代碼中有語法錯誤function後，你應該有 ()，你在你的代碼
錯過
我已經使用切換，以便它顯示和隱藏，但如果你想，你可以單獨使用隱藏。

DEMO

來源

2015-05-08 13:08:19

*「不使用jquery」*。 – dfsq

@dfsq對不起，我已經看到了小提琴，他使用JQuery，所以我編輯和張貼，而我正在糾正他的小提琴他們有一個評論對話，我不知道 –

據@ JoeFitter的回答，您可以切換「UPARROW」顯示，並通過點擊「DownArrow中文」隱藏使用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

來源

2015-05-08 13:10:55 Roman

使用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/

來源

2015-05-08 13:28:31

我不認爲這僅僅是使用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/

來源

2015-05-08 13:39:08

如何隱藏CSS的同時單擊另一個

回答

相關問題