Question

此代码在我正在处理的项目上成功运行。这个问题是这个代码影响的元素绝对定位。当.field-name-field-pin-point点击元素.group经销商被隐藏，但.field-name-field-pin-point离开页面。理想情况下，我希望在页面加载时将可见性设置为none，但在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

Answer 1

我建议您最好的方法是添加一个css规则，只需在元素上切换一个类

CSS

.group-dealer.hidden{ visibility:hidden}

JS

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

Answer 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';
        });
    });
});

Answer 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.

改变切换（）;从显示：无到可见性：隐藏

3 个答案: