3

我正在尝试创建一个类似于博客功能的手风琴，首先您会看到一组行（准确地说是 100 像素），当您单击博客标题时，博客文章会扩展到其全高。

这是我到目前为止所拥有的：

HTML：

                    <ul class="blog">

                        <li class="list-item">
                            <div class="list-item-left">
                                <h2 class="expand">Project Eden</h2>

                                <time>07.08.2012</time>
                            </div>
                            <div class="list-item-right">
                                <p>"Sed ut perspiciatis unde </p>                                   
                            </div>
                            <div class="list-item-whitespace"></div>
                        </li>

                        <li class="list-item">
                            <div class="list-item-left">
                                <h2>Project Eden</h2>

                                <time>07.08.2012</time>
                            </div>
                            <div class="list-item-right">
                                <p>"Sed ut perspiciatis unde</p>
                            </div>
                            <div class="list-item-whitespace"></div>
                        </li>

</ul>

jQuery：

var $listItems = $('.list-item');
var closedHeight = 100;
var slideSpeed = 1000;

$(".list-item").click(function() {
  if($(".list-item:animated").length) 
    return false;
}).toggle(function() { 
        var openHeight = $(this).parents("div:first").find(".list-item-right").height();
    $(this).animate({height:openHeight}, slideSpeed,"easeOutExpo");
    $(this).children('.list-item-whitespace').css({'display':'none'});
}, function(){
        $(this).animate({height:100}, slideSpeed,"easeOutExpo");
        $(this).children('.list-item-whitespace').css({'display':'block'});  
});

所以基本上我们正在做的事情（据我了解，我是 jQuery 的新手！）：

我们在变量中存储了一些信息，然后我们定义了一个函数，它将 .list-item 扩展到 .list-item-right 的实际高度，当我们再次单击它时，它将恢复为“关闭" 100 像素的高度。

现在，我想做的是在单击 .list-item 时不触发 .toggle 事件或 .click 事件。

相反，我希望它仅在您单击 .expand 类或 .list-item-left h2 （如果您愿意）时触发。

如果这对任何人有任何意义，请告诉我我在哪里不知所措。

最好的问候，K。

4

1 回答 1

1

我就是这样做的。它需要稍微重构您的 html。您将列表项内容包含在父 div 中。您可以使用它来找出未溢出的高度是多少。

当您展开列表项时，您会添加一个开放或封闭的类，以便您了解状态。

我还摆脱了我想象中的清除 div，并给了容器 div overflow: auto，它导致包含的元素自我清除。

http://jsfiddle.net/WZVb6/1/

//set all blog posts to 100px to start
$('li.list-item h2').click(function() {
    $this = $(this);
    var nheight = $this.closest('.naturalheight').height();

    if ($this.hasClass('open')) {
        $this.closest('li').animate({
            height: 100
        });
        $this.removeClass('open');
    }
    else {
        $this.closest('li').animate({
            height: nheight
        });
        $this.addClass('open');
    }

});​
于 2012-04-30T02:24:53.953 回答