Question

所以我已经建立了一个基础站点，我想知道如何将当前使用的按钮变成一个按钮，该按钮附在站点右侧的一个盒子中，从中拔出吗？

我要描述的示例[1]

我知道这部分与标题无关，但是我将如何设置设置为“未发现的美丽”元素的暗模式？

Jsfiddle：https://jsfiddle.net/dipiu/jqh36L9o/2/

    <!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="uft-8">
    <title>.</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="jumbotron jumbotron-fluid height100p banner" id="home">
      <div class="container h100">
        <di class="contentBox h100">
            <div>
                <h1>Undiscovered Beauty</h1>
                <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac augue accumsan, tristique leo ac, commodo nulla. Nulla sem orci, dapibus sed porta sit amet, convallis id quam. Phasellus in tellus vitae ligula pulvinar luctus. </p>
            </div>
        </div>
      </div>
    </div>


    <div class="toggle"> </div>
    <div class="content">
        <h1>What is Lorem Ipsum?</h1>
        <p>Lorem ipsum dolor sit amet, liber adipisci necessitatibus cum te, sea in nisl utamur. Ea regione lobortis eos, ei vix nostrud diceret. Et per aliquam eligendi, cu officiis euripidis cum. Vel at vocibus tincidunt, pri ne cibo dolores nominavi, prima sententiae dissentiet cum ea. In his altera corrumpit.Case legere accusam at has, ne sit probatus iracundia. Odio essent interpretaris ei eum. At cum erant honestatis, est probo commodo ei. Pri id erat facilis mentitum, pro an prima disputando. In salutandi urbanitas vix, vis oblique scaevola et.<br><br>
        Nec etiam explicari dissentias te, latine saperet habemus in mea. Te usu admodum pericula, eum ipsum soleat forensibus ad. Quo eu graeco luptatum accusamus. Dolore aperiri no usu, ei cum liber dictas diceret. Virtute saperet invidunt quo ei, lorem liber repudiandae nam ex, an his oratio quodsi debitis.Cu meis dicam pericula nec, illum commune perfecto at eos, ei pri latine vivendum posidonium. Vel iuvaret democritum at, vel propriae accusata ad, his vivendum signiferumque te. Vim dicunt molestie te, te quo erant splendide. No vis reque suavitate forensibus, id mea deseruisse eloquentiam. In sea offendit menandri adipiscing, ad pro libris labore graeco.</p>

    </div>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

    <script src="script.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

Answer 1

您可以使用position:fixed这样的属性来修复按钮：

.btn{
  position: fixed;
  top: 40px;
  right: 0;
}

<button class="btn">Button</button>

对于深色主题，您可以添加.dark类名，然后像这样打开它：

$(document).ready(function(){
  $("#changeTheme").click(function(){
    $("body").toggleClass("dark");
  });
});

body{
  background-color: white;
}

.dark{
  background-color: black;
}

.dark .bloc{
  background-color: gray;
}

.dark .bloc p{
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="light">
  <div class="bloc">
    <p>
      Hello world !<br/>
      <a href="#" id="changeTheme"> Change theme</a>
    </p>
  </div>
</body>

Answer 2

如果您需要隐藏按钮，则可以进行如下操作。

let $settings = $("#settings");
let $settings__toggle = $("#settings__toggle");

$settings__toggle.on('click', function () {
    $settings.toggleClass("settings_open");
})

.settings {
    top: 20%;
    left: 100%;
    position: fixed;
    transform: translateX(0);
}

.settings.settings_open {
    transform: translateX(-100%);
}

.settings .settings__toggle {
    right: 100%;
    position: absolute;
}

<div id="settings" class="settings">
    <button id="settings__toggle" class="settings__toggle">
        Toggle settings
    </button>
    <div>
        Your Settings
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在网站的侧面制作一个按钮？

2 个答案: