Нажмите на div, чтобы появился / исчез другой div

Я немного застрял, пытаясь заставить <div class"portfolio-entry-toggle"> toggle <div class="portfolio-entry"> появляться и исчезать, в настоящее время он работает только при наведении курсора, но если я нажимаю на него - ничего не происходит. Вот скрипка http://jsfiddle.net/swAP9/

cheers


javascript html toggle css
person user3077308    schedule 08.12.2013    source источник
comment
Вы ищете решение на чистом CSS? Это возможно только с помощью JavaScript.   -  person AlliterativeAlice    schedule 08.12.2013
comment
Не совсем, подойдет любое решение.   -  person user3077308    schedule 08.12.2013
comment
@AlliterativeAlice, не совсем верно, у вас есть то, что вы можете сделать с помощью взлома Checkbox здесь. Хотя это может быть слишком сложно.   -  person Francisco Presencia    schedule 08.12.2013
comment
Вы используете jquery? Если да, то это всего лишь однострочный текст: $(".portfolio-entry-toggle").click(function(){ $(".portfolio-entry").toggle(); });   -  person Francisco Presencia    schedule 08.12.2013
comment
Использование jquery: jsfiddle.net/swAP9/3   -  person Joke_Sense10    schedule 08.12.2013

Ответы (2)


arrow_upward
0
arrow_downward

Единственный способ увидеть эту работу - использовать селектор: active. Однако, исходя из того, что я вижу в вашем JSFiddle, это не ответ на ваш вопрос.

Как уже упоминалось, вы можете использовать метод jQuery toggle (). Лично я подхожу к этой задаче именно так.

person Director of Technology    schedule 08.12.2013

arrow_upward
0
arrow_downward

Вы можете использовать такую ​​функцию Javascript для переключения видимости записи портфолио. Эта функция будет работать только в IE> 9 и только в браузерах, поддерживающих querySelector. См. http://caniuse.com/#feat=queryselector для получения дополнительной информации.

Удачи!

function toggleEntry() {
    var p = document.querySelector('.portfolio-entry');
    if (p.style.visibility === 'visible') {
        p.style.visibility = 'hidden';
    } else {
        p.style.visibility = 'visible';
    }
}

document.querySelector('.portfolio-entry-toggle').
    addEventListener('click', toggleEntry);
person Joshua Toenyes    schedule 08.12.2013
comment
Ура, мужик, отлично работает! огромное спасибо. - person user3077308; 08.12.2013