无法在JavaScript函数中更改div颜色

Question

我已经编写了这个JavaScript文件（使用jQuery）：

$(document).ready(function() {
    $("[data-action=open]").click(show_category);
    $("[data-action=close]").click(hide_category);
});
function show_category() {
    var $category = $(this).data("target");
    if ($("#"+$category).is(":visible")) {
        hide_category($category);
    } else {
        $("#"+$category).show(250);
    }
    $("[data-action=close][data-target="+$category+"]").attr("data-visible", "1");
}
function hide_category($var) {
    if (typeof $var == 'string') {
        var $category = $var;
        $("[data-action=close][data-target="+$category+"]").attr("data-visible", "0");
    } else {
        var $category = $(this).data("target");
        $(this).attr("data-visible", "0");
    }
    $("#"+$category).hide(250);
}

我要使其不可见的div （通过将颜色更改为透明）从未将颜色更改为透明。 我尝试将attr("data-visible", "0")更改为css("color", "transparent")但这也没有任何效果。 仅当我单击具有[data-action=open]的a ，才会发生这种情况。 我的HTML在这里：

<a class="category_header" data-target="websites" data-action="open" href="#side_nav">Websites</a>
<a href="#side_nav" data-target="websites"  data-action="close" data-visible="0">✕</a>

我正在尝试使其能够单击相同的a来隐藏和显示，但是也可以单击✕ 。

最后，我尝试将其更改为css("background", "blue")只是为了进行测试，并且有效。 这是相对的SCSS：

&[data-action="close"] {
    width: 20px;
    height: 30px;
    background-color: #111;
    text-align: center;
    border-bottom: 1px solid #aaa;
    color: transparent;
    &[data-visible="1"] {   
        color: $#fafafa;
    }
}

任何帮助表示赞赏！

我使用我的代码制作了一个也不起作用的jsFiddle： http : //jsfiddle.net/RmeSJ/ X直到被单击后才消失。

Answer 1

将功能更改为：

function hide_category($var) {
    var $category = (typeof $var == 'string') ? $var : $(this).data("target");
    $("#" + $category).hide(250, function() {
        $("[data-action=close][data-target=" + $category + "]").attr("data-visible", "0");
    });
}

此处： http ： //jsfiddle.net/RmeSJ/2/

Answer 2

如果要隐藏元素，为什么不使用：

$("[data-action=close][data-target="+$category+"]").css('display', 'none');

要么

$("[data-action=close][data-target="+$category+"]").hide();