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基本上会为你处理一些逻辑。也就是说，如果元素被隐藏，则显示它，如果显示它隐藏它。

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

根据DIV点击显示/隐藏DIV

3 个答案: