hide/show toggle divs

Question

Пожалуйста, помогите! Я пытался выяснить, как закрыть конкретный DIV, когда он уже открыт.

Например, пожалуйста, смотрите: http://jsfiddle.net/WGRvw/

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

Я пытался делать еще:

  $(function(){ 
      $(document).ready(function() { 
       $(".prov").click(function(){ 
        $(".clearfix").hide(); 
       }); 

   $('#BC').hide(); 
       $('#BC-show').click(function() { 
        if($('#BC').toggle('slow')) { 
         return false; 

        } 
        else { 
         $('#BC').hide(); 
        } 
       }); 
       $('#AB').hide(); 
       $('#AB-show').click(function() { 
        if($('#AB').toggle('slow')) { 
         return false; 

        } 
        else { 
         $('#AB').hide(); 
        } 
       }); 
       }); 
      }); 

    }); 

Ваша помощь ценится.

Спасибо!

Answer 1

Кажется, что у вас есть два события для каждого элемента.

Один использование Classname Другого использования ID

Попробуйте этот код

$(function() { 
    $(document).ready(function() { 
     $('#BC, #AB').hide(); 

     $(".prov").click(function() { 
      var id = $(this).attr('id').split('-')[0]; 
      $('.clearfix').not('#'+id).hide(); 
      $('#' + id).toggle('slow'); 
      return false; 
     }); 
    }); 
});​ 

Check Fiddle

Просто прикрепить событие, используя класс и получить идентификатор от него и используйте его для переключения.

Answer 2

Похоже, что ваш первый обработчик событий скрывает элемент, а затем вызывается переключение. Таким образом, toggle показывает элемент, поскольку $(".prov").click(function(){ $(".clearfix").hide(); }); скрывает его.

Answer 3

Что произойдет, если вы нажмете ссылку на шоу, это то, что divs спрятаны и вы вызываете toggle, который в основном показывает div снова каждый раз. Поэтому желаемый эффект не отображается. Так просто оставить из следующих действий:

Update:

  $(document).ready(function() { 

       $('#BC, #AB').hide(); 
       $('#BC-show').click(function() { 
        $('.clearfix:visible').not('#BC').hide() 
         $('#BC').toggle('slow'); 
         return false; 
       }); 
       $('#AB-show').click(function() { 
        $('.clearfix:visible').not('#AB').hide() 
         $('#AB').toggle('slow'); 
         return false; 
       }); 
      }); 

Answer 4

$(function() { 
    $('#BC, #AB').hide(); 

    $('.prov').click(function() { 
     $('#'+this.id.replace('-show','')).toggle('slow').siblings('div').hide('slow'); 
     return false; 
    }); 
}); 

FIDDLE

Там нет необходимости в двух готовых функций DOM, а первая функция связана с классом Скрывает элементы, а вторая функция, связанная с идентификатором, переключает элементы, которые теперь, конечно, скрыты и всегда будут показаны.