更改切换（）；从显示：无到可见性：隐藏答案

【问题标题】：Change Toggle(); from Display:none to Visibility:hidden更改切换（）；从显示：无到可见性：隐藏
【发布时间】：2013-12-28 12:26:44
【问题描述】：

此代码在我正在处理的项目中成功运行。这样做的问题是该代码影响的元素是绝对定位的。当 .field-name-field-pin-point 它点击元素 .group 经销商被隐藏，但 .field-name-field-pin-point 移出页面。理想情况下，我希望在页面加载时将可见性设置为无，但在 CSS 中执行该部分可能更容易。这是我目前使用的：

jQuery(document).ready(function () {
        jQuery('.node-202 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').toggle();
    });

});

会有更多的节点以不同的方式定位，因此我提供的完整类名是必要的。标记（一般来说）如下：

<div class="node-202">
    <div class="group-dealer">...</div>
    <div class="field-name-field-pin-point">...</div>
</div>

我基本上是在地图上创建点，点击后会弹出一个小窗口，其中包含有关该位置的更多信息。

如果您想了解更多信息，请参考我的上一篇文章：Toggle Class Visibility by Clicking on another Class

【问题讨论】：

"none" 不是可见性属性的有效值。你想要“隐藏”。也就是说，我不清楚你的问题。为什么不能只更改.group-dealer 的样式？
你想要visibility:hidden 你也可以创建另一个函数（比如toggleVisibility(obj)），其中obj是一个jQuery对象，然后函数体将类似于obj.css({"visibility":"hidden"})（以及逻辑在适用时切换到visible）然后调用toggleVisibility(obj)而不是obj.toggle()

标签： javascript jquery css class visibility

【解决方案1】：

我建议你最好的方法是添加一个 css 规则并在元素上切换一个类

CSS

.group-dealer.hidden{ visibility:hidden}

jQuery('.node-202 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').addClass('hidden');/* use toggleClass if more appropriate*/
})

【讨论】：

是的，添加/删除一个类，让 CSS 处理设计部分 +1
这行得通！我也添加了css。谢谢你。我将其更改为 toggleClass 进行测试，在页面加载时它与我想要的相反（弹出窗口立即显示）但该功能有效。我可能只需要使用 css 或更改返回到 addClass。
通常首先使用 css 类最容易查看...更容易撤消，尤其是在更改多个显示属性时

【解决方案2】：

只需切换可见性然后

jQuery(document).ready(function () {
    jQuery('.node-202 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').css('visibility', function(_,vis) {
            return vis == 'hidden' ? 'visible' : 'hidden';
        });
    });
});

【讨论】：

我刚刚替换了这一行：jQuery(this).siblings('.group-dealer').toggle(); });与你所说的一样，但它没有用。
这可能是因为该行还包含点击处理程序的关闭。

【解决方案3】：

试试：

$('.node-202 .field-name-field-pin-point').click(function () {
    if ($(this).siblings().css('visibility') == 'visible') {
        $(this).siblings().css('visibility', 'hidden');
    } else {
        $(this).siblings().css('visibility', 'visible');
    }
});

DEMO here.

【讨论】：

如果有任何元素通过条件，is 会出现一些问题，:visible 选择器也会在使用visibility 时始终为真。见:visible selector docs
你应该修复你的代码，这个答案有很多错误
@Hiral 我在您发表评论时尝试了您的更新答案，但仍然没有成功。