переключить видимость div с помощью списка флажков

Question

У меня есть веб-приложение (ASP.NET2.0 C#).Внутри него у меня есть элемент div, содержащий список флажков и кнопку.

Я хочу переключить просмотр div, поэтому у меня есть в Интернете код JavaScript, который мне поможет.

Вот код:

<script language="javascript">
var state = 'hidden';

function showhide(layer_ref) {

    if (state == 'visible') 
    {
        state = 'hidden';
    }
    else 
    {
        state = 'visible';
    }
    if (document.all) 
    { //IS IE 4 or 5 (or 6 beta)
        eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) 
    { //IS NETSCAPE 4 or below
        document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) 
    {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
    }
}
</script>

Я вызываю функцию следующим образом:

<a href="javascript://" onclick="showhide('AlertDiv');">Choose Columns</a>

Когда я использую эту функцию, она показывает мне элемент div с кнопкой, но не показывает список флажков... Есть идеи, что происходит?

Спасибо.

Answer 1

Вы пробовали использовать отображение вместо видимости?

Например, вместо:

document.getElementById(layer_ref).style.visiblity = "hidden";
document.getElementById(layer_ref).style.visiblity = "visible";

Использовать:

document.getElementById(layer_ref).style.display = "none";
document.getElementById(layer_ref).style.display = "block";

Вам придется заменить все ссылки на видимость на display, а не только на версию getElementById.Вы также можете рассмотреть возможность использования jQuery который будет обрабатывать ваш сценарий с помощью нескольких строк кода, плюс нет необходимости в атрибуте onclick для облака вашего html.

<script type="text/javascript" src="jquery-1.3.2.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.toggleLink').click(function(e) {
       e.preventDefault();
       $('#AlertDiv').toggle();
    });
  });
</script>
<a href="#" class="toggleLink">Choose Columns</a>

Answer 2

Некоторые предложения:

1. Вам действительно следует рассмотреть возможность использования библиотеки javascript, например АСП.НЕТ AJAX или JQuery.Это поможет убрать специфичный для браузера код.
2. Основывайте видимость на состоянии флажка, а не просто на его переключении.
3. «отображение», вероятно, является лучшим стилем в этой ситуации, а не «видимость».Если вы используете «видимость», вы просто получите пустую область там, где должен быть «слой», когда он невидим.
4. Вместо «ссылки на слой» вы, вероятно, захотите передать идентификатор тега div и идентификатор флажка.

Пример в asp.net ajax:

Вот ваш флажок:

<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' /> 

Вот область, которую вы хотите показать/скрыть:

<div id='mylayer'>content</div>

Вот ваша функция:

<script language="javascript">
function showhide(checkboxid, layerid)
{

    if($get(checkboxid).checked==true)
    {
         $get(layerid).display = "none";
    }
    else
    {
         $get(layerid).style.display = "";
    }
}
</script>