Div Resize согласно изображению Нажмите

Question

Div Resize согласно изображению Нажмите

0

У меня было два div в First Div, у меня было одно изображение, если я нажимаю изображение слева. Div должны изменить размер. Правая сторона Div должна показать полное содержимое страницы, а затем, если я снова щелкнул изображение, правая сторона div перейдет в исходное положение. добиться этого??

 <div style="border: 2px solid red;float:left;width:10%;height:400px "> <a href>Image Click</a></div>
<div style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to show in full page</div>

user3331535 20 март 2014, в 10:28

Источник

2

Есть ли шанс, что вы сможете переписать вопрос во что-нибудь читаемое? Немного грамматики и пунктуации не сработает? В принципе, трудно понять, что вы имеете в виду ...
Jamie Barker 20 март 2014, в 09:07
0

это может помочь
Pete 20 март 2014, в 09:08
0

Пожалуйста, jsfiddle.net
ShibinRagh 20 март 2014, в 09:14
0

jsfiddle.net/Wr7N8 Демонстрационная ссылка
user3331535 20 март 2014, в 09:16

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

Есть ли шанс, что вы сможете переписать вопрос во что-нибудь читаемое? Немного грамматики и пунктуации не сработает? В принципе, трудно понять, что вы имеете в виду ...
jsfiddle.net/Wr7N8 Демонстрационная ссылка

Kiranramchandran · Answer 1 · 2014-03-20T09-04-00.000Z

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

HTML

 <div id="fdiv" style="border: 2px solid red;float:left;width:7%;height:400px "> <a href>Image Click</a></div>
<div id="sdiv" style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to show in full page</div>

JS

    <script type="text/javascript">
        $(document).ready(function () {
            var swidth=$('#sdiv').width();
$('#fdiv a').click(function (e) {
            e.preventDefault();

     var dupwidth=swidth;
            $('#sdiv').animate({ 'height': ($('#sdiv').height() == 500) ? 700 : 500 ,'width': ($('#sdiv').width() == swidth) ? parseInt(dupwidth)*1.75 : swidth }, 200);

        });

        });

    </script>

ДЕМО ЗДЕСЬ

Jai · Answer 2 · 2014-03-20T07-56-00.000Z

0

Поскольку вы не задали id/class для div изображения, вы можете попробовать следующее:

$('div').find('a').on('click', function (e) {
   e.preventDefault();
   var height = $(this).closest('div').css('height');
   if (height === "400px") {
      $(this).closest('div').css('height', 'auto');
   } else {
      $(this).closest('div').css('height', '400px');
   }
});

Обновленная демоверсия

Jai 20 март 2014, в 07:56

0

jsfiddle.net/Wr7N8 посмотри на это ничего не получится
user3331535 20 март 2014, в 09:14
0

подожди, я покажу тебе.
Jai 20 март 2014, в 09:18
0

@ user3331535 зацените обновленный ответ с демоверсией.
Jai 20 март 2014, в 09:24
0

Вы должны уменьшить высоту, но я хочу, чтобы .Если пользователь щелкнул левой стороны, изображение Div должно было сжиматься до определенной ширины. правая сторона div должна отображаться на полной странице без уменьшения высоты
user3331535 20 март 2014, в 09:34
0

сжать до определенной ширины вы имеете ввиду его высоту?
Jai 20 март 2014, в 09:44
0

Сэр, я имею в виду расширяемый и складной Div
user3331535 20 март 2014, в 09:56
0

@ user3331535 вы можете взглянуть на обновленный ответ и скрипку.
Jai 20 март 2014, в 10:12

Показать ещё 5 комментариев

CodeSlave · Answer 3 · 2014-03-20T07-39-00.000Z

Вы можете иметь два класса, а затем добавить или удалить класс из <div class="smaller"> зависимости от щелчка. классы могут быть примерно такими:

.bigger
{
border: 2px solid Blue;
float:left;
width:50%;
height:500px
}
.smaller{
border: 2px solid red;
float:left;
width:10%;
height:400px; 
}