Развернуть список с помощью slideToggle - PullRequest
Новая
       20

Развернуть список с помощью slideToggle

0 голосов
/ 11 февраля 2009

У меня есть неупорядоченный список, подобный этому: 

 <a href="#" id="myList-toggle">Show the rest</a> 

 <ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>

и этот код jQuery: 

  var list = $('#myList li:gt(4)');
    list.hide();
     $('a#myList-toggle').click(function() {
        list.slideToggle(400);
        return false;
   });

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

Как я могу это сделать?

Ответы [ 5 ]

3 голосов
/ 11 февраля 2009

ваш метод не работает, потому что он найдет высоту с высотой: auto.

После долгих неудач и попыток я придумала что-то, что почти работает.

Есть ли у вас какие-либо комментарии к моему коду, я был бы очень признателен.

И как бы мне это сделать, если я хочу, чтобы та же ссылка снова свернула список 

<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

 <script type="text/javascript">
  $(document).ready(function() {

        var list = $('ul#myList');   
        var original_height = list.height(); 
        list.css({height:$('#myList li').height()*5});

$('a#myList-toggle').click(function() {
list.animate({height:original_height}) 
       return false;
    }); 

      });
</script> 

<style type="text/css">
ul#myList {
    overflow: hidden;
}
</style>
</head>
<body>

 <a href="#" id="myList-toggle">Show the rest</a> 

 <ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul> 


</body>
</html>
2 голосов
/ 11 февраля 2009

Довольно неуклюжее решение ИМХО, но если оно работает на вас - оно работает на вас ...

Чтобы свернуть и развернуть список, перейдя по той же ссылке: 

$(document).ready(function() {

        var list = $('ul#myList');   
        var original_height = list.height();
        var new_height = $('#myList li').height()*5;
        list.css({height:new_height});

        $('a#myList-toggle').click(function() {
        if( list.height() == original_height ) {
            list.animate({height:new_height});
        } else {
            list.animate({height:original_height});
        }
        return false;
    });

});
0 голосов
/ 12 февраля 2009

В чем проблема с простым переключением списка вместо элементов? 

 $(function(){
    var listheight = $("#mylist").height();
    $("a#myList-toggle").toggle(function(){
        $("#mylist").slideToggle();
    },function(){$("#mylist").animate({height:listheight})});
    });
0 голосов
/ 11 февраля 2009

Вы можете присвоить тегу UL высоту с помощью overflow:hidden. Затем вы используете animation({height:auto}), чтобы показать все. В противном случае у вас нет жизнеспособного решения.

0 голосов
/ 11 февраля 2009

Быстрый и не очень грязный способ: оберните его элементом div и slideToggle('#myList div.wrapper').

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...