切換div需要2次點擊。應該是1點擊

Question

我在這裏隱藏了一個移動div的一些很好的幫助，但還有一個額外的問題，我有。我開始學習更多的JavaScript，絕對是一個新手。

這是一個隱藏在移動設備上的內容div的工作示例，除非點擊一個按鈕。它工作正常，除了需要2點擊最初打開div。我希望它只是一個點擊。

我已經看到這類問題的一些答案，並嘗試過，但他們超出了我現在的理解能力。我沒有得到它。

我該如何重寫我的腳本，以便只需點擊一下按鈕即可打開div？謝謝！

function toggleGallery() { 
 
    var x = document.getElementById('image-gallery'); 
 
    if (x.style.display === 'none') { 
 
    x.style.display = 'block'; 
 
    } else { 
 
    x.style.display = 'none'; 
 
    } 
 
}

#image-gallery { 
 
    display: block; 
 
    width: 600px; 
 
    border: 1px solid black; 
 
} 
 

 
#image-gallery li { 
 
    width: 150px; 
 
    height: 150px; 
 
    color: white; 
 
    text-align: center; 
 
    margin: 10px; 
 
    background-color: gray; 
 
    display: inline-block; 
 
} 
 

 
button { 
 
    display: none; 
 
} 
 

 
@media (max-width: 600px) { 
 
    #image-gallery { 
 
    display: none; 
 
    width: 100%; 
 
    } 
 
    button { 
 
    display: block; 
 
    } 
 
}

<div class="container"> 
 
    <button onclick="toggleGallery()">Click to view images</button> 
 
    <p>I want to reveal this content on mobile with just one button click. </p> 
 
    <div id="image-gallery"> 
 
    <ul> 
 
     <li>Image 1</li> 
 
     <li>Image 2</li> 
 
     <li>Image 3</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<!--container-->

Answer 1

在toggleGallery()函數中，將條件x.style.display === 'none'替換爲x.style.display !== 'block'。

的display屬性最初不等於none意思那麼你的函數將其設置爲none的條件，這意味着下一次它會正常工作，並將其設置爲block。通過確認display不等於block這將是第一次。

Answer 2

設置x.style.display = 'block';在啓動style財產沒有看到CSS規則

Answer 3

在這裏，你有不好的CSS

var x = document.getElementById('image-gallery'); 
 

 
function toggleGallery() { 
 
    x.style.display = x.style.display === 'none' ? 
 
    "block" : 'none'; 
 
}

#image-gallery { 
 
    display: block; 
 
    width: 600px; 
 
    border: 1px solid black; 
 
} 
 

 
#image-gallery li { 
 
    width: 150px; 
 
    height: 150px; 
 
    color: white; 
 
    text-align: center; 
 
    margin: 10px; 
 
    background-color: gray; 
 
    display: inline-block; 
 
} 
 

 
@media (max-width: 600px) { 
 
    #image-gallery { 
 
    display: none; 
 
    width: 100%; 
 
    } 
 
    button { 
 
    display: block; 
 
    }

<div class="container"> 
 
    <button onclick="toggleGallery()">Click to view images</button> 
 
    <p>I want to reveal this content on mobile with just one button click. </p> 
 
    <div id="image-gallery"> 
 
    <ul> 
 
     <li>Image 1</li> 
 
     <li>Image 2</li> 
 
     <li>Image 3</li> 
 
    </ul> 
 
    </div>

Answer 4

那是因爲x.style只返回內聯樣式的#image-gallery。由於它沒有內聯風格，因此x.style.display將始終評估爲未定義。

你想要的是實際得到元素的計算顯示屬性（即你在開發人員工具中看到的「計算樣式」下）。爲了得到這一點，你可以簡單地使用window.getComputedStyle(element)，即：window.getComputedStyle(x).display代替：

function toggleGallery() { 
 
    var x = document.getElementById('image-gallery'); 
 
    var xDisplay = window.getComputedStyle(x).display; 
 
    if (xDisplay === 'none') { 
 
    x.style.display = 'block'; 
 
    } else { 
 
    x.style.display = 'none'; 
 
    } 
 
}

#image-gallery { 
 
    display: block; 
 
    width: 600px; 
 
    border: 1px solid black; 
 
} 
 

 
#image-gallery li { 
 
    width: 150px; 
 
    height: 150px; 
 
    color: white; 
 
    text-align: center; 
 
    margin: 10px; 
 
    background-color: gray; 
 
    display: inline-block; 
 
} 
 

 
#image-gallery { 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
button { 
 
    display: block; 
 
}

<div class="container"> 
 
    <button onclick="toggleGallery()">Click to view images</button> 
 
    <p>I want to reveal this content on mobile with just one button click. </p> 
 
    <div id="image-gallery"> 
 
    <ul> 
 
     <li>Image 1</li> 
 
     <li>Image 2</li> 
 
     <li>Image 3</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<!--container-->