jQuery show 删除显示属性

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 在页面加载时隐藏（显示='none'）时，它不适用于隐藏部分。我可以显示该块，但我无法隐藏它。

我注意到当我显示一个内容时，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>

Answer 2

这对自己来说太难了。

HTML

<span class="toggle" id="lien1" data-original-text="Quest 1">Quest 1</span>
<div id="content1">Boubou1</div>

<span class="toggle" id="lien2" data-original-text="Quest 1">Quest 2</span>
<div  id="content2">Boubou2</div>

JS

$(document).ready( function () {

    $('.toggle').on('click', function() {
        $(this).next('div').toggle('blind', textToggle); // or slideToggle();
    });


    function textToggle() {
        var $target = $(this).prev('span'); // "this" is the div that was toggled.
        var originalText = $target.attr('data-original-text');

        if ( $(this).is(':visible') ) {
            $target.text(  originalText + ' open' );    
        } else {
            $target.text( originalText + ' closed' );
        }   
    }
});

小提琴：http://jsfiddle.net/29c4D/7/

编辑以包含标签+效果。