我有以下代码:

<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并尝试再次单击它以将其关闭时,它不会关闭。 仅当我单击下一个时,它才会关闭。 我需要在此处进行更改以使其第二次单击时也关闭?

#1楼 票数: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> 

#2楼 票数:1

如上一个答案所建议,您可以使用.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/

#3楼 票数:0

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

  ask by DigitalWhirl LLC translate from so

未解决问题?本站智能推荐:

2回复

显示隐藏多个div

这个想法是,当我点击一个pictire,另一张图片和一些文字显示。 我成功了: jQuery的 HTML CSS 但我对如何使用多张图片做到这一点感到困惑? 如果我有一个例子,有8个不同的可点击图像,那将显示8个不同的图像和文本。 并且,有没有办法让它
3回复

jQuery隐藏和显示折叠多个div

我需要能够在页面上隐藏和显示div。 默认情况下,我需要一个活动的div,然后当我单击其他链接以显示另一个div时,我需要隐藏该活动的div,依此类推。 因此,在给定的时间仅打开一个div。 我已经放了一个演示来展示我的需求,可以这么说,但是一旦单击另一个链接,我就需要它折叠/隐藏
3回复

jQuery切换/显示和隐藏div

我有这个html结构: 我想做的是在click .section_header> h1上工作的切换/显示和隐藏功能,以显示具有在data-target中定义的id的div,并将其隐藏在h1标记内,但始终保持打开状态和#newest打开状态默认情况下页面加载。 我努力了:
2回复

如何显示与单击链接相关的DIV,并使用Jquery隐藏其他DIV?

正如我在主题上总结的那样,我想显示与单击链接相关的DIV,并使用Jquery隐藏其他DIV。 为了能够理解我的意思,请访问Worldlines 您将在此处看到与一些新闻相关的主题。 当某人单击某个主题时,新闻div将向下滑动到所单击的主题下方,并且以前阅读的新闻div将隐藏。 我
2回复

显示/隐藏div切换中的Cookie

我的剧本: 题: 如何向其中插入Cookie,以便在隐藏它时,刷新页面后它仍保持隐藏状态。 感谢帮助。
1回复

jQuery slidetoggle显示一次隐藏一个div

我在创建一次打开一个div的Jquery切换时遇到问题。 我希望在单击div ( show )时仅显示一个内容。 在这里,它们都同时打开。 JS小提琴 另外:如何添加选项,以便在打开新的div之后隐藏打开的div,而且即使您没有打开新的div通过单击"hide"当前打开的选
3回复

jQuery显示/隐藏多个div切换

首先,感谢您抽出宝贵的时间来帮助我。 对不起我的英语不好 ;-) 好吧,我为您提供了一个指向我的项目的链接,这将更容易理解我的问题 http://lix.in/-c20b94 如右侧所示,您有社交面板。 我想用jquery打开每个面板的面板(最后一个提要)。 在这
2回复

显示/隐藏具有按钮更改文本的div

我有一个我不知道如何解决jQuery的问题,因为我还是很菜鸟。 我有4个(或更多)框,每个框都有一个“查看详细信息”按钮,我需要的是,当您单击“查看详细信息”时,会显示一个隐藏的div及其相应信息,但当您隐藏显示div时,按钮更改为“隐藏详细信息”-我可以用切换点将其点开,但要注意的是,如