2

我想display从 div 中检测 css。如果display:block，则将图标更改为-，如果display:none将图标更改为+。

我尝试了这段代码，但不起作用。

if($('#ceo').css('display') == 'none'){ 
    $("#button img").css({top:"-18px"});
} else {
    $("#button img").css({top:"9px"});
}

我想制作可折叠的树结构。这是我的小提琴

4

5 回答 5

3

我做了很大的改变并重写了一些代码。现在看起来不错：请参阅jsfiddle 中的演示 

function transform(element, direct) {
    var value;
    if (direct == 1) {
        value = "9px";
    } else {
        value = "-18px";
    }
    $("img", element).stop().animate({
        top: value
    }, {
        queue: false,
        duration: 200
    });
}

$(document).ready(function () {
    $("#button").click(function () {
        // Check if #ceo display:block, set image to minus
        if ($('#ceo').css('display') == 'none') {
            transform($("#button"), 1);
        } else {
            transform($("#button"), 2);
        }
        $("#ceo").fadeToggle("fast", "linear");
        $("#button2").fadeToggle("fast", "linear");
    });

    $("#button2").click(function () {
        if ($('#division').css('display') == 'none') {
            transform($("#button2"), 1);
        } else {
            transform($("#button2"), 2);
        }
        $("#division").fadeToggle("fast", "linear");
    });
});
于 2013-05-27T10:23:18.997 回答
2

我自己在 JS 方面不是很好。我在http://jsfiddle.net/jennift/DESkX/1/中的代码有效，但我确信它可以比我拥有的更精简：

$(document).ready(function(){
    $("#button").click(function(){

        // Check if #ceo display:block, set image to minus
        if($('#ceo').css('display') == 'none'){ 
            $("img", this).stop().animate({top:"9px"},{queue:false,duration:200});
        } else {
            $("img", this).stop().animate({top:"-18px"},{queue:false,duration:200});
        }

        $("#ceo").fadeToggle("fast", "linear");
        $("#button2").fadeToggle("fast", "linear");
    });

    $("#button2").click(function(){  
        if ($("#division").css('display') == 'none') {
            $("img", this).stop().animate({top:"9px"},{queue:false,duration:200});
        } else {
            $("img", this).stop().animate({top:"-18px"},{queue:false,duration:200});                    
        }

        $("#division").fadeToggle("fast", "linear");
    });

});
于 2013-05-27T11:28:41.900 回答
0

您可以使用计算样式获取实际显示值。

window.getComputedStyle( document.getElementById("#ceo"), null).getPropertyValue("display")

$('#ceo').css('display') 仅显示内联样式显示值。

于 2013-05-27T09:56:45.990 回答
0

你可以试试这个javascript代码

function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("maximze_icon"))
  {
  element.src="images/minimize_icon.gif";
  }
else
  {
  element.src="images/maximze_icon.gif"; 
  }
}
var state = 'block';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}

和html代码如下尝试....

<img id="myimage" onclick="showhide('div1'); changeImage()" src="images/minimize_icon.gif"><a href="#" onclick="showhide('div1'); changeImage()">Root</a>
于 2013-05-27T10:01:03.420 回答
0

这可能正是您所期待的：

$(function(){
    $("#button2").hover(function(){
        $("img", this).stop().animate({top:"9px"},{queue:false,duration:200});
    }, function() {
        $("img", this).stop().animate({top:"-18px"},{queue:false,duration:200});
    });
});

$(document).ready(function(){
    $("#button").click(function(){

        // Check if #ceo display:block, set image to minus
        if($('#ceo').css('display') == 'none'){ 
            $("#button img").css({top:"9px"});
        } else {
            $("#button img").css({top:"-18px"});
        }

        $("#ceo").fadeToggle("fast", "linear");
        $("#button2").fadeToggle("fast", "linear");
    });

    $("#button2").click(function(){
        $("#division").fadeToggle("fast", "linear");
    });
});

在这里演示>>

于 2013-05-27T10:01:14.217 回答