使用 JQuery 切换 div 可见性答案

【问题标题】：Using JQuery to toggle div visibility使用 JQuery 切换 div 可见性
【发布时间】：2014-03-02 07:39:45
【问题描述】：

我正在编写一些 jquery 代码来切换 Div 可见性。我按照这里发布的方法：http://jsfiddle.net/Ga7Jv/。

当用户点击一张图片（在 H2 标签旁边）时，我希望它切换 div。

这里是 Jquery：

$(function()
{
$(".expander").live('click', function(){
        $(this).next("#TableData").slideDown();
        $(this).removeClass('expander');
        $(this).addClass('expanded');
});

$(".expanded").live('click', function(){
        $(this).next("#TableData").slideUp();
        $(this).removeClass('expanded');
        $(this).addClass('expander');
});

这是 HTML：

<h3><img src="toggle.png" class ="expander" alt="Expand"/> 
Tabular Data</h3>
<div id="TableData">
//Content
</div>

css 应用于类扩展器，当我单击按钮时，css 似乎发生了变化，正如我所期望的那样。所以我假设代码正在找到切换按钮并切换类。

但是它没有执行我需要的操作，即根据该类向上或向下滑动 div。

我尝试实现的另一种方法是：

  $(function(){
     $('.expander').live('click',function(){
     $('#TableData').show();
     $('#TableData').hide();
        });

这只会关闭 div，当我单击它时不会再次打开。我也有，所以它关闭得很好，但是当我打开它时，它会立即再次关闭。

谢谢

【问题讨论】：

旁注： 从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。
感谢所有答案，如果我不需要，我最终使用 Satpal 来避免更改课程。

标签： javascript jquery html css

【解决方案1】：

你的代码的问题是它的最后一个函数调用是.hide()，因此它总是会隐藏div

只需使用.toggle()，它就会显示或隐藏匹配的元素。

$(function() {
  $('.expander').on('click', function() {
    $('#TableData').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h3><img src="toggle.png" class="expander" alt="Expand" />
</h3>

<div id="TableData">The Core Knowledge Sequence UK is a guideline of the fundamental skills and content to cover in English, maths, history and geography, science, music and visual arts.</div>
<p class="traversing"></p>

或

$(function () {
    $('.expander').on('click', function () {
        $('#TableData').slideToggle();
    });
});

如果你想通过滑动显示或隐藏匹配的元素，你可以使用.slideToggle()

$(function() {
  $('.expander').on('click', function() {
    $('#TableData').slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<h3><img src="toggle.png" class="expander" alt="Expand" />
</h3>

<div id="TableData">The Core Knowledge Sequence UK is a guideline of the fundamental skills and content to cover in English, maths, history and geography, science, music and visual arts.</div>
<p class="traversing"></p>

【讨论】：

'Visibility' 和 'Display' 在 CSS display: none; 和 visibility: hidden; 中是不同的。 jQuery的切换（和slideToggle）将显示更改为无，将其从页面布局中删除 - 如果您希望元素“不可见”但仍占用它先前占用的空间，您需要设置$('#TableData').css("visibility", "hidden");然后将其更改回来需要时。

【解决方案2】：

这个小提琴演示了如何在 div 中切换 div。

Toggle div inside the div

$('.toggle').click(function(){ $('.showMe').slideToggle('slow'); });

【讨论】：

【解决方案3】：

如果你想在同一个元素中切换类名，最好在其中有另一个固定类并不断更改其他类。

这就是我要说的：

$(function(){
    $(".toggler").on("click", function(){
        $(this)
        .toggleClass("expander expanded")
        .parent().next().slideToggle();
    });
});

提示：

这里.toggler 是触发器元素的固定类，我在其中切换.expander 和.expanded 类。
另外，您为 slideToggle 选择了错误的元素。 #TableData 是.parent().next()。

Working Demo : http://jsfiddle.net/ashishanexpert/nuw2M/1/

【讨论】：

【解决方案4】：

在您的函数中，它会显示 div，然后再次隐藏它。

你可以通过调用.toggle()函数来改变它的状态，所以jQuery自己决定显示或隐藏它。

【讨论】：