Question

单击锚点时，我有一个div切换。当div显示时，我正试图通过类更改图标，当它被隐藏时，但代码不起作用。

有谁知道怎么做？

// Toggle design/code
$(".design-n-code").click(function(e) {
    code.toggle();
}); code.hide();

// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
    $(this).addClass('code-active');
} else {
    $(this).removeClass('code-active');
}

Answer 1

您必须将用于检查可见性的逻辑放入click处理程序。否则，它只执行一次，这是脚本执行的整个开始。

// Toggle design/code
$(".design-n-code").click(function() {
    code.toggle();

    // Handles the icon so users know it's active when code is visible.
    if (code.is(':visible')) {
      $(this).addClass('code-active');
    } else {
      $(this).removeClass('code-active');
    }
});
code.hide();

Answer 2

代码可见性的测试应该在处理程序中。在处理程序中，this指的是已点击的元素，因此您必须调用addClass / removeClass来代替元素#icon-id（将#icon-id调整为正确的ID）。

// Toggle design/code
$(".design-n-code").click(function(e) {
    code.toggle();

    // Handles the icon so users know it's active when code is visible.
    if (code.is(':visible')) {
      $('#icon-id').addClass('code-active');
    } else {
      $('#icon-id').removeClass('code-active');
    }
});
code.hide();

Answer 3

你说你有一个锚点，当点击时，切换另一个元素，一个div。点击时使用'this'不会改变其他元素的类。

你会想要这样的东西：

HTML

<a href="#" id="toggler">CLick me to toggle the other div</a> 
<div id="toBeToggled" class="IsShown">I have class abc</div>

JS

    $('#toggler').click(function() {
        var target = $('#toBeToggled');
        if (target.is(":visible")) {
            target.addClass('IsHidden').removeClass('IsShown');
            target.hide();
            // Demo purposes
            console.log(target.attr('class'));
        } else {
            target.addClass('IsShown').removeClass('IsHidden');
            target.show();
            // Demo purposes
            console.log(target.attr('class'));
        }
    });

JS FIDDLE EXAMPLE

JQuery - 隐藏/可见时更改元素的CSS

3 个答案: