Question

下面的代碼顯示和隱藏div的內容dynamically generated id's像div_1, div_2從div id，似乎都工作正常，除了它需要隱藏一次div內容像點擊div_1應該打開它的內容並點擊div_2應該隱藏div_1。請幫我解決這個問題。

echo "<span class='bold'><a name='form_a_$group_seq' href='#div_$group_seq' id='form_a_$group_seq' value='1' " . 
"onclick='return divclick(this,\"div_$group_seq\");'"; 
if ($display_style == 'block') echo "clicked"; 
echo "<b>" . xl_layout_label($group_name) . "</b></a></span>\n"; 

echo "<div id='div_$group_seq' class='section' style='display:$display_style;'>\n"; 
echo " <table border='0' cellpadding='0'>\n"; 
$display_style = 'none'; 
} 
else if (strlen($last_group) == 0) { 
echo " <table border='0' cellpadding='0'>\n"; 
} 

下面是使代碼可用的JavaScript。但它一次顯示或隱藏所有的div內容。

function divclick(a, divid) { 
    var divstyle = document.getElementById(divid).style; 
    if (divstyle.display == 'none') { 
     divstyle.display = 'block'; 
    } else { 
     divstyle.display = 'none'; 
    } 
    return true; 
} 

這是一段更新的html代碼，它是瀏覽器渲染的內容。

<div class='container2'><ul class='taby'><li class='dropown'><a name='form_a_1' href='#div_1' id='form_a_1' value='1' onclick='return divclick(this,"div_1");'>Who</a></li></ul> 
<div id='div_1' class='section'> 
<table border='0' cellpadding='0'> 
<div id='div_2' class='section'> 
<table border='0' cellpadding='0'> 
<div id='div_3' class='section'> 
<table border='0' cellpadding='0'> 

Answer 1

如果您在頁面中使用jQuery你可以在你的代碼添加一行只增加了

function divclick(a, divid) { 
    var divstyle = document.getElementById(divid).style; 
    if (divstyle.display == 'none') { 
     $(".section").css('display', 'none'); 
     divstyle.display = 'block'; 
    } else { 
     divstyle.display = 'none'; 
    } 
    return true; 
} 

如果你沒有在頁面上使用jQuery的就有點複雜，但可以做幾行。

function divclick(a, divid) { 
    var divstyle = document.getElementById(divid).style; 
    if (divstyle.display == 'none') { 
     var sections = document.getElementsByClassName('section'); 
     Array.prototype.forEach.call(sections, function(section){ 
      section.style.display = 'none'; 
     }); 
     divstyle.display = 'block'; 
    } else { 
     divstyle.display = 'none'; 
    } 
    return true; 
} 

Answer 2

這實在太雜亂無法理解。您應該考慮清理您動態呈現html的方式，並且在遇到這些問題時，這樣的問題更容易解決。或者一起阻止他們。

<span class='bold' style='background:#0DCAD1'> 


<a name="<?php echo "form_a_$group_seq";?>" href="<?php echo "#div_$group_seq";?>" id="<?php echo "form_a_$group_seq";?>" value='1'> 

等....

如果您呈現所有回波串你的HTML，你會發現它非常難以對付以後。特別是，當您在處理大量渲染的應用程序時。