Question

我有这个元素：

<div id="propertiesArea"><div id="closeProperties"></div>some content</div>

我需要通过将CSS可见性属性设置为隐藏来使用JQuery来滑动它。我在这里尝试：

$('#closeProperties').click( function(){    
        $('#propertiesArea').toggle('slide');        
    });

但它不起作用。任何想法我如何通过设置可见性属性slidetogghehe元素隐藏？

Answer 1

您是否尝试过使用隐藏方法来管理div的可见性？（）

$('#propertiesArea').hide();

Answer 2

我认为你需要修改你的HTML

<div id="propertiesArea">
 <div id="closeProperties">
  <div>some content</div>
 </div>
</div>

实际的切换代码如下

$( "#closeProperties" ).click(function() {
  $( "#propertiesArea" ).toggle( "slow", function() {
    // Animation complete.
  });
});

根据您的上述逻辑，当您隐藏父div时，您将无法再显示div。

Answer 3

以下是解决方案，请检查您的HTML代码：

<div id="propertiesArea"><div id="closeProperties">some content</div></div>

和JS

$('#closeProperties').click( function(){    
    $('#propertiesArea').css('visibility', 'hidden');       
});

Answer 4

这是最简单的切换代码。

$('#closeProperties').click( function(){    
    $('#propertiesArea').toggle(":visible");       
});

或

jquery中还有一个名为slideToggle

的函数

$('#closeProperties').click( function(){    
    $('#propertiesArea').slideToggle("slow"); // you can pass milliseconds or "fast"/"slow" keywords       
});

区别在于toggle只是隐藏并显示元素，而slideToggle也隐藏并显示元素，但具有滑动动作。

如何通过将visibility属性设置为隐藏来滑动div？

4 个答案: