Question

在我的网页中，我必须列出每列中的几篇文章，请参阅下面的HTML代码。我正在做一个响应式设计。当视口大小超过800像素时，文本在display: block;下可见，但当视口低于800像素时，文本在CSS3代码中隐藏display: none;。当文本被隐藏时，带有加号的按钮以display: block;而不是文本的相同方式添加。当用户单击加号按钮时，使用jQuery slideToggle再次显示该文本。到目前为止一切都很好。

但我遇到的问题非常令人困惑的是，当我调整浏览器窗口的大小时，每件事都很好用，直到我点击其中一个加号来查看隐藏文本，然后点击减号按钮来隐藏文本。但是当我再次向上调整浏览器的大小时，文本会被隐藏起来，但仅限于我点击的这篇文章！？我清楚了吗？可能是什么问题呢？我已经盯着代码很长一段时间了，但我发现什么都不对。有谁可以吗？

jQuery的：

     $('div.plus').click(function(e){
    e.preventDefault();
    var article = $(this).parents('article');
    var extras = article.find('div.text').slideToggle('fast'); 
    var img = article.find('.plus img');
        if(img.attr('src') == "bilderGuide/bilderLayout/plus.png") {
        img.attr('src','bilderGuide/bilderLayout/minus.png');
        }
        else {
        img.attr('src','bilderGuide/bilderLayout/plus.png');
        }
    });

HTML：

<article>
<header>
<img src="image.jpg" alt=""/>
    <div class="articleContent">
        <div class="imageTextContainer">
        </div>
        <h2>H1</h2>
        <div class="text">
        <p>
        Text here
        </p>
        </div>
        <div class="articleContentArrow"></div>
        <div class="plus"><a href="#"><img src="plus.png" /></a></div>
    </div>

Answer 1

尝试切换类，而不是使用slidetoggle。这样，元素永远不会成为内联样式，因此问题不存在。

jQuery在隐藏它时设置元素<elem style="display: none" />，内联样式覆盖css样式，因此你的css无法重新打开。

如果您想要幻灯片动画，请使用css3 transition: max-height 1s;从0到某事。高度不起作用，max-heigth:auto;也不起作用。也许将来某个时候。

使用jQuery显示无/阻塞问题

1 个答案: