Показать детское Div в скрытом родительском Div

Ответ 1

Я не думаю, что это возможно.

вы можете использовать javascript, чтобы вытащить элемент или дублировать его, а затем показать его.

в jQuery вы можете скопировать элемент

var element = jQuery('.Inner-Div').clone();

а затем присоедините к любому видимому элементу, который подходит.

element.appendTo('some element');

Ответ 2

Установите видимость родительского класса для скрытия или сглаживания. Установите дочерний объект на вид. Что-то вроде этого:

.parent>.child
{
    visibility: visible;
}

.parent
{
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

Полный пример: http://jsfiddle.net/pread13/h955D/153/

Отредактировано с помощью @n1kkou

Ответ 3

Согласовано, невозможно с отображением: нет. Здесь другое решение, которое скроет родительский и дочерний объекты, однако высота родительского элемента не будет свернута.

.Main-Div {
    position: relative;
    left: -9999px;
}

.Inner-Div {
    position: relative;
    left: 9999px;
}

Пример: http://jsfiddle.net/luke_charde/jMYF7/

Ответ 4

Нет. К сожалению, для вас это не.

Ответ 5

Почему бы и нет:

.Main-Div{
font-size:0px;
line-height:0;
margin:0;
padding:0;
height:0;

}

.Inner-Div{
font-size:12pt
}

вместо отображения: none, если ваше главное Div - только текст?

Это решение должно свернуть текст в родительском div, не скрывая дочерний div. Кроме того, он по-прежнему работает с программами чтения с экрана, не делая странных вещей, таких как нападание div вне поля зрения или дублирование объекта с помощью JS.

Ответ 6

Вы можете использовать javascript для перемещения дочернего элемента из главного-div.

Ответ 7

Хорошо, это старый, но я тоже ударил. Мое решение было несколько иным: -

• Создайте изображение с тем же цветом, что и фон (белый в моем случае), который будет охватывать div. Это изображение имеет абсолютное позиционирование и z-индекс выше, чем div, который я хочу скрыть.
• Сделайте внутреннее div (то, что вы хотите видеть) position: relative и присвоите ему самый высокий z-порядок.
• главный div начинается как скрытый.
• Когда страница загружается, поместите изображение покрытия и сделайте основной div видимым. Так как div является нижним z-порядком, он будет за покрывающим изображением, поэтому он не будет виден. Однако внутренний div имеет более высокий z-порядок и будет виден.

Преимущество такого подхода заключается в том, что структура и положение основных элементов div и дочерних элементов могут оставаться неизменными на всем протяжении. Это означает, что когда вы хотите показать главный div, вы можете просто удалить обложку. Кроме того, если вы хотите увидеть, как будет выглядеть главный div при отладке, вы можете просто удалить элемент покрытия в средствах отладчика браузера, например firebug в firefox или ctrl + shift + я в chrome.

Не забудьте установить z-index на элемент, который должен быть установлен как абсолютный, относительный или фиксированный. Если у вас возникли проблемы с введением эффекта z-index, это, вероятно, связано с контекстами стекирования. См. здесь для хорошего описания того, как это решить.

Ответ 8

Поскольку это невозможно сделать, вы можете клонировать/вытягивать элемент, как указано в этом ,

Но если события этого элемента влияют на его родительские/дочерние элементы, вы можете попробовать это обходное решение.

• Поместите обертку вокруг родительского div
• добавьте в оболочку других детей (которые будут использоваться в качестве ссылки)
• Скрыть родительский div.

Как это -

 <style>
  .Main-Div{
  display:none;
  }
 </style>

 <div class="wrapper">

  <div class="Main-Div">
    This is some Text..
    This is some Text..
    <div class="Inner-Div'>
      <a href="#"><img src="/image/pic.jpg"></a>
    </div>
    This is some Text..
    This is some Text..
  </div>

  <div class="Inner-Div-Refer'>
    <a href="#"><img src="/image/pic.jpg"></a>
  </div>

</div>

Теперь активируйте все события в div 'Inner-Div-Refer' в исходный div 'Inner-Div'. Как -

$('.Inner-Div-Refer a').click(function(){
  $(this).parent().children('.Main-Div').children('.Inner-Div').children('a').trigger('click');
});

Ответ 9

Я использовал трюк jQuery, чтобы заменить родительский код на дочерний код. Это было то, что мне нужно для моей конкретной проблемы, но это может быть полезно для кого-то еще:

<div id='wrapper'>
   testcontent... void info from a template
   <div id='inside'>
      I wanted this content only
   </div>
</div>

то код:

$(document).ready(function(){
   $("#wrapper").html($("#inside").html());
});

обратите внимание, что это не повлияет на идентификатор DIVS... это еще один вариант (который будет поддерживать идентификатор одинаковым:

$(document).ready(function(){
   $("#wrapper").before($("#inside").outerHTML).remove();
});

Ответ 10

$(document).ready(function(){
var innerElement = $('.Inner-Div');
var parent = $('.Main-Div');

// body or whatever selector you want to move the element
$(body).append(innerElement);

// could use hide also
parent.detach(); })

Я знаю, что это более старая должность, и кто-то уже принял ответ, но я предпочитаю этот метод. JQuery будет перемещать элемент в тело (или любое другое выбранное местоположение) с помощью метода append(). Я храню родительский элемент в переменной и отключаю(), поэтому, если вам нужно собрать все это вместе позже, вы можете легко сделать:

$(body).append(parent);
parent.append(innerElement);

И все так, как было.