jquery раскрыть / переключить - начальный размер div - PullRequest
Новая
       25

jquery раскрыть / переключить - начальный размер div

1 голос
/ 20 января 2012

Пожалуйста, смотрите мой код ниже ...

Я озадачен и хочу сначала показать 30px (в высоту) нижнего дел. В настоящее время я могу только переключиться, чтобы показать или скрыть.

Что я на самом деле хочу, так это показать первые 30px и переключить / показать все, что содержится ниже этого. 

<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript">
  $(document).ready(function() {
  // Hide the "view" div.
  $('div.view').hide();
  // Watch for clicks on the "slide" link.
  $('div.slide').click(function() {
  // When clicked, toggle the "view" div.
  $('div.view').slideToggle(400);
  return false;
});
});
</script>
</head>
<body>
<div class="view">
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</body>
</html>

Спасибо

Ответы [ 6 ]

3 голосов
/ 20 января 2012

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

Добавьте это CSS 

.view{
    overflow:hidden;
    height: 30px;
}

JS 

$(document).ready(function() {
    var $divView = $('div.view');
    var innerHeight = $divView.removeClass('view').height();
    $divView.addClass('view');

    $('div.slide').click(function() {
        $('div.view').animate({
          height: (($divView.height() == 30)? innerHeight  : "30px")
        }, 500);
        return false;
    });
});

Демо

0 голосов
/ 20 января 2012

это ты о чем?

http://jsfiddle.net/eiu165/ew5dH/

// Hide the "view" div.
$('p').hide();
$('p').eq(0).show();
$('span').click(function(){
    $(this).closest('p').next().toggle();
});
0 голосов
/ 20 января 2012

Что-то вроде этого должно быть достаточно: 

<style type="text/css">
    .view { height: 30px;
            overflow: hidden;
          }
</style>

<script type="text/javascript">
    $(".slide").click(function() {
        if(!$(".view").hasClass('maximized')) {
            $(".view").addClass('maximized');
            $(".view").animate({ height: '+=250' }, 'slow');
        } else {
            $(".view").removeClass('maximized');
            $(".view").animate({height: '30' }, 'slow');
        }
    });
</script>
0 голосов
/ 20 января 2012

Если я понимаю, что вы пытаетесь сделать, то вам действительно нужно оживить ваш рост до auto. Однако это невозможно. Я придумал это, чтобы смоделировать это: 

$("div").click(function(){
    var $this = $(this);

    if($this.height()==30){

        // set height to auto in order to check how tall it is in current window size    
        $this.css("height","auto");
        var height = $this.height();

        // done checking height, set back to 30
        $this.css("height","30px");

        $this.animate({height: height + "px"},1000, function(){
            // animation done, set height to auto to allow resizing with window resize
            $this.css("height","auto");        
        }); 
    }else{
        $this.animate({height: "30px"},1000);
    }
});

http://jsfiddle.net/txKt7/1/

ПРИМЕЧАНИЕ. Это всего лишь подтверждение концепции, в которой не используется фактическая HTML-разметка. Это должно быть немного скорректировано, чтобы соответствовать вашей конкретной ситуации.

0 голосов
/ 20 января 2012

CSS: 

.view_height{
height : 30px;
overflow:hidden;
}

HTML: 

<div class="view view_height">

Jquery: 

$(document).ready(function() {
  $('div.slide').click(function() {
     // When clicked, toggle the class.
    $('div.view').toggleClass("view_height");
   });
});

скрипка: http://jsfiddle.net/Vknqw/

0 голосов
/ 20 января 2012

ОК, так что я бы установил переполнение содержимого: скрытое, а затем просто динамически изменил высоту поля на переключателе. Если для параметра overflow задано значение hidden, то все, что выходит за пределы ширины / высоты поля, будет ... хорошо, оно будет скрыто.

Итак, вы бы сделали что-то вроде этого:

HTML ... 

<div class="view" style="overflow:hidden;height:30px">
    ... (your normal code) ...
</div>

А в JS ... 

$('div.slide').click(function() {
  var height = $('.view').css('height');

  if (height == 30) 
     $('.view').css('height', 'auto');
  else
     $('.view').css('height', 30);
});

Нечто подобное, во всяком случае. Не проверял этот код, но это основная идея.

Надеюсь, это поможет. Удачи:)

...