Расширение HTML-полей по щелчку

Я хочу создать три окна с коротким текстом, и когда вы нажмете на один из этих полей, он будет расширяться на всю ширину страницы и отображает весь контент. Затем его можно закрыть, нажав на какой-то значок.Расширение HTML-полей по щелчку

Я создал gif, чтобы вы могли видеть, что я имею в виду. GIF

У меня до сих пор основная структура на jsfiddle

При нажатии на один ящик каждый раз открываю содержание коробчатых 3 InstEd содержания нажатой коробки. Также я не знаю, как закрыть открытую коробку.

Является ли анимация, которую вы видите в gif, возможно с помощью css или ей нужен javascriptl?

$(".row.boxes-container .box").click(function (e) { 
     $(".box-content-full").addClass("open"); 
    }); 


.row.boxes-container{ 
    position:relative; 
} 

.box:hover{ 
    cursor:pointer; 
} 

.box-content{ 
    padding:30px; 
    background-color:#f03939; 
} 

.box-content-full{ 
    display:none; 
    width:0%; 
    transition: width 1s; 
} 

.box-content-full.open { 
    position: absolute; 
    max-width: 100%; 
    width: 100%; 
    z-index: 2; 
    display:block; 
    transition: width 1s; 

} 

.box-content-full.open .inner{ 
    padding:30px; 
    margin-left:15px; 
    margin-right:15px; 
    background-color: red; 

} 


<div class="container"> 
     <div class="row boxes-container"> 

      <div class="box first"> 
       <div class="box-content-full"> 
        <div class="inner"> 
         <div class="inner-header"> 
          <span class="close">x</span> 
         </div> 
         <h3>Box 1</h3> 
         <p>Lorem ipsum dolem filum</p> 
        </div> 
       </div> 

       <div class="col-md-4"> 
        <div class="box-content"> 
         <h3>Box 1</h3> 
        </div> 
       </div> 
      </div> 

      <div class="box second"> 
       <div class="box-content-full"> 
        <div class="inner"> 
         <div class="inner-header"> 
          <span class="close">x</span> 
         </div> 
         <h3>Box 2</h3> 
         <p>Lorem ipsum dolem filum</p> 
        </div> 
       </div> 

       <div class="col-md-4"> 
        <div class="box-content"> 
         <h3>Box 2</h3> 
        </div> 
       </div> 
      </div> 

      <div class="box third"> 
       <div class="box-content-full"> 
        <div class="inner"> 
         <div class="inner-header"> 
          <span class="close">x</span> 
         </div> 
         <h3>Box 3</h3> 
         <p>Lorem ipsum dolem filum</p> 
        </div> 
       </div> 

       <div class="col-md-4"> 
        <div class="box-content"> 
         <h3>Box 3</h3> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

источник

2015-03-29 zenbormi

Обновлено вашу скрипку:

EDIT 2:
Теперь он должен сбросить при нажатии на окно.

P.S. Нажмите второй флажок для эффекта.
P.P.S. Эффект отображается неправильно, потому что страница автоматически заключает контракты в JSFiddle. В любом случае, если вы попробуете его в другом месте, и это не сработает, считайте, что я ошибался!

EDIT:
Обновлен ответ на элемент расширения, который был нажат.

https://jsfiddle.net/bszv7f90/9/

$(".row.boxes-container .box").click(function(e) { 
 
    $(this).children().each(function(i) { 
 
    if ($(this).attr('class') == 'box-content-full') { 
 
     $(this).toggleClass("exp"); 
 
    } 
 
    }); 
 
    $(".box-content-full").toggleClass("open"); 
 
    $(".box-content").toggleClass("clicked"); 
 
});

.container { 
 
    max-width: 600px; 
 
} 
 
.row.boxes-container { 
 
    position: relative; 
 
} 
 
.box:hover { 
 
    cursor: pointer; 
 
} 
 
.box-content { 
 
    padding: 30px; 
 
    background-color: #f03939; 
 
} 
 
.box-content-full { 
 
    display: none; 
 
    width: 0%; 
 
    transition: width 1s; 
 
} 
 
.box-content { 
 
    padding: 30px; 
 
    background-color: #f03939; 
 
} 
 
.box-content.clicked { 
 
    display: none; 
 
} 
 
.box-content-full.open { 
 
    position: absolute; 
 
    max-width: 0%; 
 
    width: 0%; 
 
    z-index: 2; 
 
    display: none; 
 
    transition: width 1s; 
 
} 
 
.box-content-full.open.exp { 
 
    position: absolute; 
 
    max-width: 100%; 
 
    width: 100%; 
 
    z-index: 2; 
 
    display: block; 
 
    transition: width 1s; 
 
} 
 
.box-content-full.open .inner { 
 
    padding: 30px; 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row boxes-container"> 
 

 
    <div class="box first"> 
 
     <div class="box-content-full"> 
 
     <div class="inner"> 
 
      <div class="inner-header"> 
 
      <span class="close">x</span> 
 
      </div> 
 
      <h3>Box 1</h3> 
 
      <p>Lorem ipsum dolem filum</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div class="box-content"> 
 
      <h3>Box 1</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="box second"> 
 
     <div class="box-content-full"> 
 
     <div class="inner"> 
 
      <div class="inner-header"> 
 
      <span class="close">x</span> 
 
      </div> 
 
      <h3>Box 2</h3> 
 
      <p>Lorem ipsum dolem filum</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div class="box-content"> 
 
      <h3>Box 2</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="box third"> 
 
     <div class="box-content-full"> 
 
     <div class="inner"> 
 
      <div class="inner-header"> 
 
      <span class="close">x</span> 
 
      </div> 
 
      <h3>Box 3</h3> 
 
      <p>Lorem ipsum dolem filum</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <div class="box-content"> 
 
      <h3>Box 3</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Теперь она должна расширяться. Я сохранил ваш код, чтобы сделать быструю копию.

источник

2015-03-29 21:54:31 Facekapow

https://jsfiddle.net/bszv7f90/11/ Я попытался создать функциональную кнопку закрытия. Но по какой-то причине это не сработает. Я скопировал ваш код, который добавляет классы css в открывающую коробку и так далее. Я думал, что могу каким-то образом изменить его, чтобы классы были удалены, щелкнув по x. У вас есть идея? – zenbormi

обновил мой anser, чтобы переключить класс на клик, работая при закрытии на X. – Facekapow

теперь он закрывается независимо от того, где вы нажимаете. К сожалению, с этим что-то не так. Сначала он открывает окно с нужным содержимым, но если вы закроете его и щелкните по другим полям, в какой-то момент он начнет открывать неправильный контент. – zenbormi

Я не использовал свой HTML кода, но пытался получить результат как можно ближе к вашему GIF:

$('.box').on('click', function() { 
 
    var $element = $(this); 
 
    
 
    var $openElement = $('<div class="absoluteBox"></div>'); 
 
    
 
    $openElement.css('left', $element.position().left); 
 
    $openElement.css('right', $element.width()); 
 
     
 
    $element.html($openElement); 
 
    
 
    $openElement.animate({left : 0, width : $('.wrapper').width()}, 500); 
 
    
 
});

.wrapper { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.box { 
 
    background-color:#CC0000; 
 
    width:150px; 
 
    height:200px; 
 
    display:inline-block; 
 
    margin-right:10px; 
 
} 
 

 
.box:last-of-type { 
 
    margin-right:0; 
 
} 
 

 
.absoluteBox { 
 
    position:absolute; 
 
    background-color:blue; 
 
    height:200px; 
 
    width:150px; 
 
} 
 

 
.box:hover { 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="box"></div> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box"></div> 
 
</div>

Я сделал ящик синего отверстия лучше замеченным. Это должно быть изменено через css, конечно, красным.

источник

2015-03-29 22:04:27 ynnus

Расширение HTML-полей по щелчку

ответ

Смежные вопросы