jQuery toggle показать/скрыть, как показать вложенные divs

Question

Я открыл этот скрипт из jsfiddle для контактной страницы, которую я создаю. Проблема в том, что я не могу понять, как показывать вложенные div, что требуется для короткого кода, который я буду использовать.

В моем примере я создал идентификатор под названием «Мне нужно, чтобы его видели!». что я хотел бы видеть всплывающее окно, когда пользователь нажимает на лицо - JSFiddle

Вот скрипт JQuery Я использую:

$(document).ready(function(){ 
    $("#upload_page a").click(function(){ 
    var id = $(this).attr('id'); 
    id = id.split('_'); 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $("#upload_container div").hide(); 
    $("#upload_container #upload_"+id[1]).show(); 
    }); 
}); 

Спасибо!

Answer 1

Проблема в том, селектор #upload_container div применяет стиль и действия всех дивы внутри upload_container вместо этого вы должны ограничить его детей upload_container

Так

#upload_container > div { 
    display:none; 
} 

затем

$(document).ready(function() { 
    $("#upload_page a").click(function() { 
     var id = $(this).attr('id'); 
     id = id.split('_'); 
     $(this).addClass('selected').siblings().removeClass('selected'); 
     $("#upload_container > div").hide(); 
     $("#upload_container #upload_" + id[1]).show(); 
    }); 
}); 

Демонстрация: Fiddle

Другим решением является добавить класс для целевой самые upload_* элементы, такие как

<div id="upload_bob9" class="upload"> Some Text 9 
     <div class="nested_div">I need to be seen!</div> 
    </div> 

затем

#upload_container .upload { 
    display:none; 
} 

и

$(document).ready(function() { 
    $("#upload_page a").click(function() { 
     var id = $(this).attr('id'); 
     id = id.split('_'); 
     $(this).addClass('selected').siblings().removeClass('selected'); 
     $("#upload_container .upload").hide(); 
     $("#upload_container #upload_" + id[1]).show(); 
    }); 
}); 

Демонстрация: Fiddle

Примечание: ID одного элемента нт должен быть уникальным поэтому используйте атрибут класса для nested_div

Answer 2

Запись:

$("#upload_page a").click(function(){ 
    var id = $(this).attr('id'); 
    id = id.split('_'); 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $("#upload_container div").hide(); 
    $("#upload_container #upload_"+id[1]+",#upload_container #upload_"+id[1]+" *").show(); 
}); 

DEMO

ИЛИ:

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

$("#upload_page a").click(function(){ 
    var id = $(this).attr('id'); 
    id = id.split('_'); 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $("#upload_container .container").hide(); 
    $("#upload_container #upload_"+id[1]).show(); 
}); 

DEMO

Answer 3

Добавьте эту строку $("#upload_container #upload_"+id[1]).find('div').show(); в коде

$(document).ready(function(){ 
    $("#upload_page a").click(function(){ 
     var id = $(this).attr('id'); 
     id = id.split('_'); 
     $(this).addClass('selected').siblings().removeClass('selected'); 
     $("#upload_container div").hide(); 
     $("#upload_container #upload_"+id[1]).show(); 
     $("#upload_container #upload_"+id[1]).find('div').show(); 
    }); 
}); 

FIDDLE Надеюсь, что это помогает.