0

我想要做的是，如果我点击一个span然后一些元素DIV淡出，否则你再次点击跨度这些元素会淡入。我还css()用来改变元素的一些样式仍然存在在那DIV。

在这里查看代码。

现在有两个问题/问题：

  1. 是否有一些捷径或技术css()可以减少使用次数？

  2. 当我尝试css()在我的else条件下使用将样式值恢复为原始值时，它们在我的else条件下都不起作用，因此条件下的新样式值if保持不变。

有什么更正或建议吗？

4

3 回答 3

3

我想要做的是如果我点击一个span

不 ，你想要做的是“当你点击一个span......”

然后 a 中的一些元素DIV淡出

...adiv淡出。

否则你再次点击span

你有没有听过有人说“然后你再点击一次”？如果这不是你说话的方式，你也不应该写它。

您要描述的是当您span第二次单击时会发生什么。其实点击多少次并不重要span，重要的是div. 您所描述的内容可以追溯到单击跨度时发生的情况。

这些元素会逐渐消失。

所以到目前为止你想说的是：

当你点击一个 span 时，检查 adiv是否可见；如果是，则淡出，否则，淡入。

在那里，我还使用 css() 来更改其中保留的元素的一些样式DIV。

听起来您想说的是您也在div使用 jQuery 的css方法进行样式设置。鉴于代码的状态，这似乎（大部分）是这种情况。

不要使用css方法。

css当您绝对需要动态样式时，使用 jQuery 的方法很有用。大多数时候，大多数人不需要动态样式。大多数时候，大多数人都需要动态的样式集。这些最好表示为应该留在样式表中的类。HTML属于.html文件，JS属于.js文件，CSS属于.css文件。

因此，您真正想要的是在div完成动画后更改一个类（或多个）。

所有这一切都无需编写任何代码。要将它们联系在一起，通常是您想要做的：

$('.some-span').on('click', function () {
    //when you click on a span
    var divIsVisible;
    //check whether a div is visible
    divIsVisible = $('.some-div').is(':visible');
    if (divIsVisible) {
        //if it is, fade out
        $('.some-div').fadeOut(function () {
            //when it's done fading out, add some classes
            $(this).addClass('is-hidden');
            //add other classes
        });
    } else {
        //else fade in
        $('.some-div').fadeIn(function () {
            //when it's done fading in, remove some classes
            $(this).removeClass('is-hidden');
            //remove other classes
        });
    }
});
于 2013-04-01T02:34:26.703 回答
1

要回答您问题的一部分：

您可以通过传递一个对象在单个调用中设置多个 css 属性（如文档所述-

$(elem).css({
  'width':10px,
  'height':10px,
  ...
});
于 2013-03-31T14:15:48.900 回答
1

当然，您也可以在 CSS 中添加class并#News应用所有样式

#News.closed {
    height: 45px;
    width: 200px;
    overflow: hidden;
}
#News.closed div {
    right: -10px;
}
#News.closed div label {
    font-size:12px;
    top: -14px;
}
}
#News.closed div label p {
    top: -15px;
    right: -20px;
}

演示：http: //jsfiddle.net/pavloschris/7G3Z4/10/

于 2013-03-31T15:28:38.813 回答