Форум

Sergey_Koval · #1 (**permalink**) 17.03.2015, 23:06

Есть блок высотой 70px при клике на ссылку нужно менять высоту этого блока )помогите плз

Decode · #2 (**permalink**) 17.03.2015, 23:49

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        .block {
           width: 100px;
           height: 100px;
           background: yellow;
        }
    </style>
</head>
<body>
   <div class="block"></div>
   <a href="#" class="link">Link</a>
   <script>
      $('.link').click(function() {
          $('.block').css("height", "200px");
      });
   </script>
</body>
</html>

Sergey_Koval · #3 (**permalink**) 18.03.2015, 01:40

ну а как сделать что бы при следующем нажатии все вернулось как было?

Decode · #4 (**permalink**) 18.03.2015, 16:22

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        .block {
           width: 100px;
           height: 100px;
           background: yellow;
        }
    </style>
</head>
<body>
   <div class="block"></div>
   <a href="#" class="link">Link</a>
   <script>
      $('.link').click(function() {
           var div = $('.block');
           if( div.innerHeight() == 100 )
                div.innerHeight(200);
           else
                div.innerHeight(100);
      });
   </script>
</body>
</html>

рони · #5 (**permalink**) 18.03.2015, 17:10

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        .block {
           width: 100px;
           height: 100px;
           background: yellow;
        }
    </style>
</head>
<body>
   <div class="block"></div>
   <a href="#" class="link">Link</a>
   <script>
   var div = $('.block'), n = 0;
      $('.link').click(function() {
           n ^= 1 ;
           div.innerHeight(n ? 200 : 100);
      });
   </script>
</body>
</html>

рони · #6 (**permalink**) 18.03.2015, 17:13

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        .block {
           width: 100px;
           height: 100px;
           background: yellow;
        }
        .max {
           height: 200px;
        }

    </style>
</head>
<body>
   <div class="block"></div>
   <a href="#" class="link">Link</a>
   <script>
   var div = $('.block');
      $('.link').click(function() {
           div.toggleClass('max');
      });
   </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript