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")，但这也没有效果。 仅当我点击a [data-action=open]时才会发生这种情况。我的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();

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

2 个答案: