Question

我创建了一个脚本，用于显示div一个<a>标记的点击。但是，我想知道的是，如果有人有一个简单的解决方案来使用相同的脚本，但允许选择div默认显示？我的剧本：

var portletToHide = new Array(
    'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_');

for(a=0;a<portletToHide.length; a++){
    document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
}

function display(id, id2){

    for(a=0;a<portletToHide.length; a++){
        document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
    }

    document.getElementById(id).setAttribute('style', 'display:block; visibility:visible;')

    if(id2){
        document.getElementById(id2).setAttribute('style', 'display:block; visibility:visible;')
    }

    $target =$('#'+id);

    $('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}

Answer 1

这使用HTML 5 data-属性，允许您选择要切换的div。您可以在下面使用vanilla Javascript或jQuery。

<强> HTML

<a href="#" data-toggle="mydiv">toggle mydiv</a>
<div id="mydiv">
    mydiv
</div>

<强>的Javascript

function toggleDiv(evt) {
    var link = evt.target;
    var toggle = link.getAttribute('data-toggle');
    var div = document.getElementById(toggle);

    div.style.display = (div.style.display == 'none')
        ? 'block'
        : 'none';

    if(evt.preventDefault)
        { evt.preventDefault(); }
    if(evt.returnValue)
        { evt.returnValue = false; }

    return false;
}

var links = document.getElementsByTagName('a')

for(var i=0,l=links.length;i<l;i++) {
    var toggle = links[i].getAttribute('data-toggle');
    if(toggle !== null && toggle != '' && document.getElementById(toggle)) {
        if(links[i].addEventListener)
            { links[i].addEventListener('click',toggleDiv,false); }
        else if(links[i].attachEvent)
            { links[i].attachEvent('onclick',toggleDiv); }
        else
            { links[i].onclick = toggleDiv; }
    }
}

<强>的jQuery

$('a[data-toggle]').each(function(i,link){
    var a = $(link);
    var toggle = a.attr('data-toggle');
    var div = $('#'+toggle);

    if(div.length) {
        a.click(function(){
            div.toggle();
        });
    }
});

Answer 2

查看是否可以使用“隐藏”类来呈现HTML。

index.css

.hidden {
    display: none;
    /* no purpose combined with display none */
    /* visibility: hidden; */
}

index.js

var portletsToHide = [
    'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_'];

function setPortletsVisibility( visible ) {

    for( var a=0; a < portletToHide.length; a++ ){
        setElementVisibility( portletToHide[a], visible );
    }
}

function setElementVisibilityById( elementID, visibility ) {

    var className = visible
        ? ""
        : "hidden";

    document.getElementById( elementID ).className = className;
}

function display(id, id2){

    setPortletsVisibility( true );

    setElementVisibilityById( id, true );

    if(id2){
        setElementVisibilityById( id2, true );
    }
}

function someFunction( id, id2 ) {

    display( id, id2 );

    $target = $( '#' + id );

    $('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}

// Default
setPortletsVisibility( false );

请注意，我不执行jQuery addClass / removeClass，这可能会导致干扰。

Javascript隐藏显示div - 默认情况下显示div

2 个答案: