Show/Hide DIV 秒基于 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');
    });

Toggle 基本上会为您处理一些逻辑。也就是说，如果元素被隐藏，它会显示它，如果它被显示，它会隐藏它。

工作示例：

$(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

首先，应用一个 class 对你的所有 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' );
});

Show/Hide DIV 秒基于 DIV 点击

Show/Hide DIVs based on DIV click

jquery

toggle

show-hide