2

displaydivからcssを検出したい。の場合display:blockはアイコンを に、アイコン-の場合は にdisplay:none変更します+。

このコードを試してみましたが、うまくいきません。

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

折りたたみ可能なツリー構造を作りたい。この私のフィドル

4

5 に答える 5

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 に答える