在没有 JQuery 的情况下滑动“阅读更多”功能

如何解决在没有 JQuery 的情况下滑动“阅读更多”功能

是否可以创建一个像这样工作的“阅读更多”按钮：

按钮会是一张照片（我没有这个问题），内容在照片下面（这里，到目前为止，我在位置：绝对原则上做了，可惜显示内容后，其余的页面没有下推，文本本身在下一个 div ' ami 之上）。单击时，文本从照片下方出来，推动其余的容器。当您再次单击时，文本会重新向上，隐藏在照片下方。

很遗憾，显示：无和显示：块或可见等之间的切换功能是不可能的，因为内容必须下坡。

对我来说不使用 jQuery 很重要。

如果我没有解释清楚，我会回答问题，马丁

解决方法

你只能用 CSS 来实现，这里是一个例子：

这个想法是在文本区域之前创建一个带有唯一 ID 的隐藏复选框，然后创建一个带有 for 属性的标签并放置该复选框 ID ，最后使用 CSS 检查复选框是否被选中，如果它被选中，则将特定样式添加到它的下一个元素，例如 #showMore:checked + .someText ，符号 + 表示仅将此样式应用于下一个 .someText 类，在这种情况下class 必须紧跟在复选框之后并在同一个父级内，而符号 ~ 表示将此样式应用于属于同一父级的所有 .theButton 类。

.someText{
  height:50px;
  overflow:hidden;
  display:block;
  padding:10px;
  border:1px solid #444;
}

.theButton{
  background: #444;
  color:#fff;
  padding:10px;
  display:block;
  width:100px;
  margin:10px auto;
  text-align:center;
  cursor:pointer;
  position:relative;
}

.theButton:after{
  content:"Read More";
}

#showMore:checked + .someText{
  height:100%;
}

#showMore:checked ~ .theButton:after{
 content:"Read Less";
}

<input type="checkbox" id="showMore" hidden />
<div class="someText">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,as opposed to using 'Content here,content here',making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years,sometimes by accident,sometimes on purpose (injected humour and the like).
</div>
<label class="theButton" for="showMore"></label>

如果您在向下推内容的同时尝试隐藏和显示文本（并且具有硬编码的高度是可以的），这里有一个基于您的代码的选项。这使用了类似于 @Ahmed Tag Amer 的复选框方法，并修复了可访问性（不透明度/位置而不是显示：隐藏）和元素顺序的变化。

我使用 <input type="checkbox"> 和 <label> 来确定元素是显示还是隐藏（未选中或选中的输入属性），并使用 z-index values 将元素定位到其父元素中。>

注意：我没有用浏览器检查这种方法的兼容性。

* {
    margin: 0;
    padding: 0;
    font-family: Open Sans;
    font-size: 16px;
    box-sizing: border-box;
}

.container {
    width: 500px;
    margin: auto;
    background-color: grey;
    padding: 0;
}
#firstButtonCheck {
    position: absolute;
    opacity: 0;
}
#firstButtonCheck ~ .firstContent {
    background-color: yellow;
    margin-top: -500px;
    width: 500px;
    height: 500px;
    max-height: 500px;
    display: block;
    padding: 5px;
    transition: margin-top 1s ease-out,max-height 1s ease-out;
}
.firstButton {
    display: block;
    height: 500px;
    width: 500px;
    background-color: red;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

#firstButtonCheck:checked ~ .firstContent {
    margin-top: 0px;
    height: 500px;
    max-height: 500px;
    transition: margin-top 1s ease-out,max-height 1s ease-out;
}


#secondButtonCheck {
    position: absolute;
    opacity: 0;
}
#secondButtonCheck ~ .secondContent {
    background-color: grey;
    margin-top: -500px;
    width: 500px;
    height: 500px;
    max-height: 500px;
    display: block;
    padding: 5px;
    transition: margin-top 1s ease-out,max-height 1s ease-out;
}
.secondButton {
    display: block;
    height: 500px;
    width: 500px;
    background-color: green;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

#secondButtonCheck:checked ~ .secondContent {
    margin-top: 0px;
    height: 500px;
    max-height: 500px;
    transition: margin-top 1s ease-out,max-height 1s ease-out;
}
.secondContent {
    height: 500px;
}

<div class="container">
    <input type="checkbox" id="firstButtonCheck" />
    <label class="firstButton" for="firstButtonCheck">Picture Here</label>
    <div class="firstContent">
        <h1>First Content</h1>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.   </div>
    <input type="checkbox" id="secondButtonCheck" />
    <label class="secondButton" for="secondButtonCheck">Picture Here</label>
    <div class="secondContent">
        <h1>Second Content</h1>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.   </div>
    </div>
</div>

这是我想象的。您可以复制此代码，它已完成。不幸的是，第一个容器的内容不是压下第二个容器而是覆盖它。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: Open Sans;
        font-size: 16px;
    }
    
    .container {
        width: 500px;
        margin: 0 auto;
        height: 1000px;
        background-color: grey;
    }
    
    .first {
        position: relative;
    }
    
    .firstButton {
        position: absolute;
        height: 500px;
        width: 100%;
        background-color: red;
        z-index: 100;
    }
    
    .firstButton:hover {
        cursor: pointer;
    }
    
    .firstContent {
        width: 100%;
        height: 500px;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        background-color: yellow;
        transition: 0.5s;
    }
    
    .firstContentShow {
        top: 500px;
    }
    
    .second {
        position: relative;
    }
    
    .secondButton {
        width: 100%;
        height: 500px;
        background-color: green;
        position: absolute;
        z-index: 98;
    }
</style>
</head>
<body>
<div class="container">
    <div class="first">
        <div class="firstButton" onclick="showFirstContent()"></div>
        <div class="firstContent"></div>
    </div>
    <div class="second">
        <div class="secondButton"></div>
        <div class="secondContent"></div>
    </div>
</div>

<script>

    function showFirstContent() {
        var content = document.querySelector(".firstContent");
        content.classList.toggle("firstContentShow");
    }
    
</script>
</body>
</html>

在没有 JQuery 的情况下滑动“阅读更多”功能

如何解决在没有 JQuery 的情况下滑动“阅读更多”功能

解决方法

相关推荐