一次和別人爭吵一個按鈕，點擊後顯示導航；再點擊不顯示的效果，是否必定以及必須用js?

時間 2019-12-08

標籤一次別人爭吵一個按鈕點擊顯示導航效果是否必定以及必須欄目 JavaScript 简体版

原文原文鏈接

事情通過是這樣的，咱們組一個說話很喜歡用必定，確定的哥們，吃午餐的時候拿了本身作的一個UI庫，頭部有一個按鈕

html

點擊展開，再次點擊收縮，他意思說一個按鈕沒法記錄點擊狀態，必須使用js。
而後我看了一眼，心想target有可能能作到這個效果，而後我說不必定，他仍是說確定，還要跟我打賭說：若是我能作出來，給我500塊。若是我作不出怎樣？ web

由於到底具體尚未實踐過，並且我只是說不必定，因此我沒有當場和他打賭，而後他就本身給我定條件說：若是作不出，你請你們吃頓飯。

app

聽他這麼說我就有點不高興了，你本身說確定要用js，而我說「不必定」，爲毛要必定跟你打賭，要是你這麼確定，你就給你的條件，我作出你給我500塊就得了。（這種用咱們那邊的話說，「死了還要撿把沙」，就是怕吃虧的意思）。

而後回來座位，我立刻寫起來，而後我寫完，他就找茬了，這個怎麼收縮不對啊。而後我把收縮動畫加上，他繼續加各類條件：那你這樣後退怎樣辦啊；刷新呢...... bili巴拉一大堆工具

徹底拋開了剛纔咱們針對的點，這個效果，不用js 是否能夠實現？動畫

下面上一下我用target寫的代碼（撇開使用情景，只針對是否不用js實現），說一下個人思路吧：
2個按鈕樣式同樣，點擊的時候會依次切換，而後下面有2個標識了target的容器，根據這2個容器又能夠找兄弟節點，設置按鈕顯示和隱藏。

demo連接：http://1.xmpros.sinaapp.com/target.html

spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .p-wrap-2 {
            position: relative;
            top:30px;
            width: 500px;
            height: 300px;
            background: yellowgreen;
            overflow: hidden;
            -webkit-animation:.5s ease wrap_kf forwards;
        }
        @-webkit-keyframes wrap_kf {
            0% {
                height: 0;
            }
            100% {
                height: 300px;
            }
        }
        .p-wrap-2:target
        {
            overflow: hidden;
            -webkit-animation:.5s ease wrap_kf_2 forwards;
        }
        @-webkit-keyframes wrap_kf_2 {
            0% {
                height: 300px;
            }
            100% {
                height: 0;
            }
        }
        .p-wrap-1:target
        {
            border: 2px solid #D4D4D4;
            background-color: #e5eecc;
            display:none;
        }
        .nav {
            position: absolute;
            top: 0;
        }
        .p-wrap-1:target ~ .nav-1 {
            background: red;
            display: none;

        }
        .p-wrap-2:target ~ .nav-2 {
            background: blue;
            display: none;
        }
    </style>
</head>
<body>

<div class="target_wrap">

    <div class="p-wrap p-wrap-1" id="news1"></div>
    
    <div class="p-wrap p-wrap-2" id="news2">
        <ul id="doc_navbar" class="doc-horizonal">
            <li class="actived"><a href="###">開始使用</a></li>
            <li><a href="###">組件列表</a></li>
            <li><a href="###">下載和定製</a></li>
            <li><a href="###">關於和支持</a></li>
            <li><a href="###">開發者工具</a></li>
            <li class="doc-right"><a href="###">歷史版本</a></li>
        </ul>
    </div>

    <p class="nav nav-1"><a href="#news1">nav 1</a></p>
    <p class="nav nav-2"><a href="#news2">nav 1</a></p>
</div>


</body>
</html>