Question

我想用jQuery UI Button来做这样的事情：

$button.button();
// ...
$button.button('hide');
// ...
$button.button('show');

与enable/disable的工作方式类似。手动隐藏和显示按钮（$button.hide(); $button.show();）会导致使用jQuery UI CSS进行一些非常棘手的格式化...

我在这里错过了一些简单的东西吗？

Answer 1

做标准$button.hide()应该做得很好，究竟是什么搞砸了？

你可以做$button.css('display', 'none')，但这就是$button.hide()所做的全部。

我很确定没有办法做你要求的事情，即使它只设置display：none就像我刚才提到的方法一样。您可能更好地弄清楚为什么设置display none会在页面的其他地方搞砸CSS。

Answer 2

如果您使用样式visibility而不是display，则按钮应该能够正确创建。 visibility: hidden样式只会使元素不可见; $ .hide（）使用的display: none样式实际上从渲染的DOM中删除了该元素。

所以简而言之：

var newButton = $('a#some-button.hidden');

// Hide element, but allow it to use render space
newButton.attr('visibility', 'hidden');
newButton.attr('display', 'block');

// Create button
newButton.button();

// Revert element to the "normal" means of hiding (may be unnecessary)
newButton.attr('display', 'none');
newButton.attr('visibility', 'visible');

// Show button
newButton.show();

我以前必须这样做。

Answer 3

旧的这个，我知道，但是......最初定义一个隐藏在CSS中的按钮，而不是用一个ui-helper-hidden类来定义它。这样它将被隐藏，直到你实例化它。 display：none隐藏一个元素，它不会占用任何空间。元素将被隐藏，页面将显示为元素不在那里。这与隐藏按钮不同，因为它仍然会占用屏幕空间。

如果你需要它在实例化后最初保持隐藏，你可以隐藏它

$elem.button().hide();

生成的jQuery UI按钮将显示：inline-block，覆盖ui-helper-hidden的display：none。

我从来没有遇到过奇怪的渲染问题，所以你的问题可能有潜在的问题。

Answer 4

**This might be easy for you:
Try this code:**
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p><button id="demo"/>Hide me</button></p>
</body>
</html>

Answer 5

这是我的解决方案。如果jquery ui改变了实现，那么无法保证。

$('#button-el').next().hide();

Answer 6

对我有用的是：

onclick =“$（this）.parent（）。css（'display'，'none'）;”

无论如何以编程方式隐藏jQuery UI按钮？

6 个答案: