Question

目标：在用户点击按钮之前隐藏我的内容，此时内容将变为可见，并在其上方和下方的内容之间“拆分”。

到目前为止，我在HTML中做了些什么;

<li id="one">
<a class="learn-more pull-right open" href="#">Learn More</a>
<div class="box"></div>
</li>`

在我的CSS中;

.box {
width:300px;
height:300px;
position:relative;
display:none;
padding: 0px;
position: absolute;
}
#one .box {
background:red;
}

在我的JS中;

$(document).ready(function(){
var open = $('.open'),
    a = $('ul').find('a');

console.log(a.hasClass('active'));

open.click(function(e){
    e.preventDefault();
    var $this = $(this),
        speed = 500;
    if($this.hasClass('active') === true) {
        $this.removeClass('active').next('.box').slideUp(speed);
    } else if(a.hasClass('active') === false) {
        $this.addClass('active').next('.box').slideDown(speed);
    } else {
        a.removeClass('active').next('.box').slideUp(speed);
        $this.addClass('active').next('.box').delay(speed).slideDown(speed);
    }
});
});

到目前为止，所有这一切都取得了一个可以下降为红色的盒子。然而，它上面/下面的内容似乎没有移开，而是盒子悬停在它上面？

Answer 1

此fiddle可能就是您要找的内容，请创建两列（div id =“left”＆amp; div id =“right”）

#content, html, body {
height: 98%;
}

#left {
float: left;
width: 50%;
background: red;
height: 100%;
overflow: scroll;
}

#right {
float: left;
width: 50%;
background: blue;
height: 100%;
overflow: scroll;
}

Answer 2

我已经设法使用以下代码解决了问题;

在我的HTML文档中，我添加了一个名为“了解更多”的新按钮，并应用了相关的类，包括最重要的类，以实现我的初始目标。

<a class="learn-more pull-right reveal-button closed">Learn More</a>

然后我继续添加：

<button class="tablinks" onclick="openModule(event, 'administration')">Administration</button>

以上内容可以多次复制，但请记住，如果您打算自行使用，则需要将管理部分更改为其他部分。我还注意到我已将其嵌套在自己的容器中，与第一个按钮分开。现在实际将数据放入“管理”按钮本身，我使用下面的代码：

<div id="administration" class="tabcontents">
    your content relevant to the button being clicked here
</div>

在我们想要包含的信息周围创建一个“容器”，并将其“链接”到我们之前制作的按钮。

现在，一旦设置了HTML，我就将其添加到文档的底部（仍在正文内）

        <script type="text/javascript">
                function openModule(evt, moduleName) {
            // Declare all variables
            var i, tabcontent, tablinks;

            // Get all elements with class="tabcontent" and hide them
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }

            // Get all elements with class="tablinks" and remove the class "active"
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }

            // Show the current tab, and add an "active" class to the button that opened the tab
            document.getElementById(moduleName).style.display = "block";
            evt.currentTarget.className += " active";
        }
    </script>

一旦添加了，现在需要做的就是添加一些样式，这是通过将以下内容添加到我的CSS文件中来完成的：

.reveal-button.closed:after 
.reveal-button.opened:after

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}

所有这一切现在应该发生的是，当有人点击按钮（在这种情况下）“了解更多”时，它会将当前屏幕内容分成两部分，并为我们制作的其他按钮和内容中的内容让路。与之相关联。

我希望这一切都有道理。

我怎样才能有一个按钮隐藏/显示内容，同时“推”已经可见的内容？

2 个答案: