Показать div и скрыть другие с помощью ToggleClass

У меня возник вопрос относительно функции переключения jQuery. Я хочу достичь этого, если я нажму на стрелку, содержимое станет видимым, а все остальное содержимое будет скрыто.Показать div и скрыть другие с помощью ToggleClass

Я использую этот JS-код для переключения класса в общем виде:

$(function() {   
    $('.main-diff .blue-bg .arc_arrow').click(function() {              
     $(this).toggleClass('arc_arrow--displayed'); 
     $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');     
    }); 
});

посмотреть на мой HTML-код и CSS вы могли бы посмотреть здесь: JSFIDDLE

Я пытался добавить $('.matchfooter').removeClass('matchfooter--displayed'); но это больше не скрывает содержимое, если я снова нажму на эту же стрелку.

источник

2015-11-23 Rotan075

Вместо toggle вы можете просто добавить класс и удалить его, нажав другие.

$(function() { 
    $('.main-diff .blue-bg .arc_arrow').click(function() { 
     //Hide others   
     $('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed'); 
     $('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed'); 

     $(this).addClass('arc_arrow--displayed'); 
     $(this).parent().next('.matchfooter').addClass('matchfooter--displayed'); 
    }); 
});

Fiddle

источник

2015-11-23 08:50:10

Спасибо! В самом деле, это также возможно, но у меня все еще есть проблема спрятать «matchfooter», щелкнув стрелку в div, которая показывала содержимое. – Rotan075

Собственно, что вам нужно делать. Закрыв его, нажав другие или закрыв его, щелкнув его снова? –

Что мне нужно: wink: – Rotan075

Вам необходимо удалить класс из других элементов, который может быть достигнут с помощью переключателя .not().

$('.main-diff .blue-bg .arc_arrow').click(function() { 
    //Hide others   
    $('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed'); 
    $('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed'); 

    $(this).toggleClass('arc_arrow--displayed'); 
    $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed'); 
});

DEMO

источник

2015-11-23 08:39:09 Satpal

Это потрясающе! Но как только вы открываете контент, вы не можете его скрыть. Вы можете только скрывать контент, нажав на другой arc_arrow. Вы знаете, как это решить? – Rotan075

@ Rotan075, Что именно вам нужно? – Satpal

Мне нужно закрыть контент, щелкнув другие стрелки и щелкнув его снова. Теперь, если '' matchfooter '' виден, и вы хотите закрыть его, щелкнув его снова, только класс стрелки будет изменен, а содержимое не будет скрыто. Чтобы быть более ясным: нажмите первое открытое содержимое -> щелкните по той же стрелке -> содержимое не будет скрыто. – Rotan075

Я решил проблему, просто изменить код JQuery со следующими и попробуйте еще раз: -

$(function() {   
    $('.main-diff .blue-bg .arc_arrow').click(function() {              
     $(this).toggleClass('arc_arrow--displayed'); 
     $(".matchfooter").removeClass("matchfooter--displayed"); 
     $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');     
    }); 
});

источник

2015-11-23 09:13:48

Показать div и скрыть другие с помощью ToggleClass

ответ

Смежные вопросы