Показать/Скрыть DIVs на основе DIV нажмите

Question

я следующий код:

<script type="text/javascript"> 
jQuery.noConflict(); 
    jQuery(document).ready(function ($) { 
     $('#telefon').click(function() { 
      $('#telefon-text').show('fast'); 
      $('#sos-text').hide('fast'); 
      $('#positionsbestimmung-text').hide('fast'); 
     }); 
     $('#sos').click(function() { 
      $('#telefon-text').hide('fast'); 
      $('#sos-text').show('fast'); 
      $('#positionsbestimmung-text').hide('fast'); 
     }); 
     $('#positionsbestimmung').click(function() { 
      $('#telefon-text').hide('fast'); 
      $('#sos-text').hide('fast'); 
      $('#positionsbestimmung-text').show('fast'); 
     }); 
    }); 
</script> 

и его работает нормально, проблема у меня есть, что когда я нажимаю, например, первый DIV и попробуйте нажать на нее еще раз, чтобы закрыть он не закрывается. Он закрывается только тогда, когда я нажимаю следующий. Что мне нужно изменить здесь, чтобы закрыть его, когда я нажму на него второй раз?

Answer 1

Использование JQuery .toggle():

Пример:

$('#sos').click(function() { 
     $('#telefon-text').hide('fast'); 
     $('#sos-text').toggle('fast'); 
     $('#positionsbestimmung-text').hide('fast'); 
    }); 

Переключение в основном заботится о некоторых из логики для вас. А именно, если элемент скрыт, он показывает его, если его показано, он скрывает его.

Рабочий пример:

$(function() { 
 

 
    $('#btnFoo').click(function() { 
 
    $('#foo').toggle("fast"); 
 
    $('#bar').hide("fast"); 
 
    }); 
 

 

 
    $('#btnBar').click(function() { 
 
    $('#bar').toggle("fast"); 
 
    $('#foo').hide("fast"); 
 
    }); 
 

 
});

.example { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: teal; 
 
    border: dashed 2px pink; 
 
    margin-bottom: 15px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="example" id="foo">Foo</div> 
 
<div class="example" id="bar">Bar</div> 
 
<button id="btnFoo">Show/Hide Foo</button> 
 
<button id="btnBar">Show/Hide Bar</button>

Answer 2

Как было предложено на предыдущем ответе, вы можете сделать это с .toggle(), но вам нужно переключить только относительно DIV на кнопку щелкнутой, так:

$('#telefon').click(function() { 
    $('#telefon-text').toggle('fast'); 
}); 
$('#sos').click(function() { 
    $('#sos-text').toggle('fast'); 
}); 
$('#positionsbestimmung').click(function() { 
    $('#positionsbestimmung-text').toggle('fast'); 
}); 

вы можете увидеть здесь работает демо: http://jsfiddle.net/yxf4g93w/

Answer 3

Сначала примените класс, общий для всех ваших s.

<div class="div-class-here"></div> 
<div class="div-class-here"></div> 
<div class="div-class-here"></div> 

Затем

var $divs = $('.div-class-here'); 

$divs.on('click', function() { 
    $divs.removeClass('fast'); 
    $(this).addClass('fast'); 
});