Question

我对手风琴效果有疑问。

我想拥有以下功能 - 如果您按下“div.post”中的任何位置，“p.read-more”中包含的文本（从开始处隐藏）将向下滑动并显示自身。然后关闭它，你需要按“div.close”。

我尝试过这样的事情，但坦率地说，正如你可能看到的那样，我迷路了： - ）

这是HTML

<div class="post">
    <p>This is a beginning of a text.</p>
    <p class="read-more">... This is the rest of the text</p>
    <div class="close">This is a close button</div>
</div>

我尝试过这样的事情

$("p.read-more").hide();

$('div.post').click(function(){         
    $(this).toggleClass("active"); 
});

if( $('div.post').hasClass('active') ) {
    $('div.close').click(function(){
        $(this).find(".read-more").slideUp();        
    }); 

} else {
    $(this).click(function() {
        $(this).find(".read-more").slideDown();
    });
}

感谢您的帮助。

Answer 1

修改

对不起，我误解了你想要发生的事情：

我想拥有以下功能 - 如果你按任何地方在“div.post”中，文本被“p.read-more”包围，这是隐藏的从一开始，向下滑动并露出自己。然后关闭它，你需要按“div.close”。

此单击事件基本上表示'如果div.post没有活动类，则向下滑动.read-more并将活动类添加到div.post'。

$('div.post').click(function () { if (!$(this).hasClass('active')) { $('p.read-more').slideDown(); $(this).addClass('active'); } });

div.close事件很简单 - 没有任何条件就好像你在.read-more已经隐藏时触发事件一样，无论如何都不会发生！

<强>更新

$('div.close').click(function() { $('p.read-more').slideUp('fast', function() { $('div.post').removeClass('active'); ); }

这应该是实现所寻求目标所需的一切。而另一个想法我会说不要隐藏.read-more使用jQuery只是使用CSS来做 - 这样你就不会在页面加载时闪烁。

Answer 2

<div class="post">
    <p>This is a beginning of a text.</p>
    <p class="read-more">... This is the rest of the text</p>
    <div class="close">This is a close button</div>
</div>

看起来你错过了第4行的结束div。

您可以使用的更简单的jquery版本是

$("p.read-more").hide();

$('div.post').click(function(){  
    if($(this).hasClass("active")) return; //exits function if this is already active

    $(".read-more").slideUp();   //causes all section to slide up
    $(this).find(".read-more").slideDown();  //causes only selected section to slide down
    $(".read-more").removeClass("active");    //removes active class from everything
    $(this).find(".read-more").addClass("active");  //sets active class to current item
});

Answer 3

你很亲密。你在这里绊倒的是操作顺序。解析脚本时，将运行一次if语句。您希望幻灯片动画在单击事件后运行，因此需要将它们移动到单击处理程序。

$('div.post').click(function() {
    $(this).toggleClass("active");
    $(this).find(".read-more").slideDown();
});

然后修改您的close点击处理程序以查找其read-more来切换

$('div.close').click(function(e) {
    $(this).siblings(".read-more").slideUp();

    e.stopPropagation();    // This prevents the div.post click from firing
});

此外，html中存在语法错误。不确定这是不是一个错字。您的close div的结束标记丢失了。

在if语句-jQuery中使用slideUp / slidingown的问题

3 个答案: