文章/答案/技术大牛

发布

社区首页 >问答首页 >样式特定元素，如果显示等于光滑动画JQuery块

问样式特定元素，如果显示等于光滑动画JQuery块
EN

Stack Overflow用户

提问于 2018-08-13 14:56:29

回答 1查看 96关注 0票数 0

我使用来自W3学校的代码对我的可折叠部分，它工作良好，现在我想滑下“打开节1按钮”(边距-顶部:10 is )，如果第一节“打开第1节内容”是隐藏的(显示无)。我知道并理解这是一项非常简单的任务，但对于JS来说，这是一个新的任务，我很难弄清楚，只有在满足某些条件的情况下，才能应用css dimamicaly (如果显示块的话，则将其还原回边距顶部:0)。

正如我说的那样，我尝试过不同的方法，它们与原始的W3 JS代码混在一起，如果我应用了其他的方法，并在上面提到了显示，它就停止工作了。

我只需要针对一个元素，如果中只有一个正在更改其状态(显示块--无；无--改为阻塞)。

如果可能的话，我想在元素上下移动时添加一些动画。

另外，如果所有可折叠部分都不显示任何内容，那么脚本将用图像激活另一个隐藏的div (前面没有提到)，如果的任何都等于显示块，那么就隐藏它。

如有任何帮助，将不胜感激。

(我有三个可折叠的按钮，每个按钮都有一个按钮，就像在W3示例中一样简单)

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    });
}

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

javascript

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-13 15:20:06

您可以创建一个函数，如果第一部分的margin-top不阻塞nextElementSibling的显示，那么它的10px将在页面加载和显示内容时执行。要使元素顺利地将边距顶部动画化，可以将transition: margin 0.5s添加到.collapsible中。

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: margin 0.5s;
}

.active, .collapsible:hover {
    background-color: #555;
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
        moveSection();
    });
}
function moveSection(){
  var section1 = coll[0];
  if(section1.nextElementSibling.style.display!="block"){
    section1.style.marginTop = "10px";
  } else {
    section1.style.marginTop = "";
  }
}
moveSection();
</script>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51825198

复制

相似问题

问样式特定元素，如果显示等于光滑动画JQuery块
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式特定元素，如果显示等于光滑动画JQuery块EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式特定元素，如果显示等于光滑动画JQuery块
EN