javascript - jQuery 显示删除显示属性

Question

我正在使用 jQuery 隐藏和显示功能，但我对显示功能有疑问。

我的 javascript 代码是:

function toggle_visibility(idContent, idLien, question) {
    var c = document.getElementById(idContent);
    var l = document.getElementById(idLien);
    var q = question;
    if(c.style.display == 'block') {
        $("#" + idContent).hide("blind") ;
        l.innerHTML = '<h4><i class=\"icone-rouge icon-right-open-big\"></i>'+ q +'</h4>' ;
    }
    else {
        $("#" + idContent).show("blind") ;
        l.innerHTML = '<h4><i class=\"icone-rouge icon-down-open-big\"></i>'+ q +'</h4>' ;
    }
}

问题是当 div 在页面加载时隐藏时(display='none')它对 hide 部分不起作用。我可以显示 block ，但无法隐藏它。

我注意到当我显示内容时，jQuery 删除了我 html 样式中的显示属性...也许有一个链接。

这里有一个链接，例如:http://jsfiddle.net/29c4D/2/

谢谢。

Answer 1

DescampsAu ，由于您使用的是 jQuery，我重写了您的代码以充分利用强大的库。您可以在这个 fiddle 中查看示例.

让 jQuery 通过使用 .toggle() 来完成检查元素是否隐藏的繁重工作。或 .slideToggle()方法。

删除您的 span 中的所有 onClick() 代码并改用此 jQuery:

jQuery

$(document).ready( function() {
    //After the page has loaded, let jQuery know where all of the spans are.
    var toggleThis = $(".toggleMe");

    //Whenever you click one of the spans do this function.
    toggleThis.click( function() {
        //Register the span you clicked and the next div that holds the hidden stuffs.
        var el = $(this),
            nextDiv = el.next(".toggleMeDiv");

        //Check if the span's partner div is hidden or showing by checking its css "display" value.
        if(nextDiv.css("display") == "block") {
            //Change the text of the span to be its title attribute plus whether its partner is showing or hidden.
            el.html(el.attr("title")+" hidden");
        } else {
            el.text(el.attr("title")+" shown");
        }

        //Let jQuery toggle the partner's visibility.
        nextDiv.slideToggle();
    });
});

HTML

<span class="toggleMe" title="Quest 1">Quest 1</span>
<div class="toggleMeDiv">Boubou1</div>

<span class="toggleMe" title="Quest 2">Quest 2</span>
<div class="toggleMeDiv">Boubou2</div>