使用javascript链接样式

Link style with javascript

本文关键字：样式 链接 javascript 使用      更新时间：2024-03-13

我有这段代码用于隐藏''显示链接，这取决于cBoxoverlay的状态。但是，当我单击关闭此项目（display:none），然后再次单击显示它（display:block）时，我的链接（#close-news）仍然没有显示。

jQuery(document).click(function () {
  if (jQuery("#cBoxOverlay").css("display", "none")) {
    jQuery("#close-news").css("display", "none");
  } else if (jQuery("#cBoxOverlay").css("display", "block")) {
    jQuery("#close-news").css("display", "block");

我哪里搞错了？

试试这个-不需要if语句。您可以将#close-news设置为任何#cBoxOverLay是

$(document).click(function () {        
    $("#close-news").css("display", $("#cBoxOverlay").css('display'));
}

使用类，做更干净的工作。

如果您不想使用类，请尝试使用jQuery的切换，它基本上正是您想要实现的：http://api.jquery.com/toggle/

使用is（"：visible"）检查元素是否可见，然后显示或隐藏。。。

jQuery(document).click(function () {
    if (jQuery("#cBoxOverlay").is(":visible")) {
        jQuery("#close-news").hide();
    } else {
        jQuery("#close-news").show();
    }
});

您可以尝试：

if ($("#cBoxOverlay").css("display") == "none") {
  // ...
}

但是，您可以使用is方法：

if ( $("#cBoxOverlay").is(':hidden')) {
       // ...
}

 $(document).click(function(){
   if ($("#cBoxOverlay").is(":hidden")) { // if #cBoxOverlay is hidden
       $("#close-news").hide() // hide the #close-news
    } else if ($("#cBoxOverlay").is(":visible")) { // if #cBoxOverlay is visible
       $("#close-news").show() // // show the #close-news
    }
 })

您可以删除第二个条件并使用else，因为当元素没有隐藏时，它当然是可见的。

根据@Raminson的回答试试这个：

$(document).click(function () {
  if ($("#cBoxOverlay").is(':hidden')) {
    $("#close-news").css("display", "none");
  } else{
    $("#close-news").css("display", "block");

也可以试试这个：

$(document).click(function(){
$('#close-news').css('display', function(){return $('#cBoxOverlay').css('display');});
});
相关文章：