切換顯示：無樣式與 JavaScript

Question

我想更改樣式（下面的第二行）以刪除display: none; 當用戶點擊“顯示所有標簽”鏈接時的一部分。 如果用戶再次單擊“顯示所有標簽”鏈接，我需要display: none; 添加回“樣式...”語句的文本。

<a href="#" title="Show Tags">Show All Tags</a>
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

我在這里和谷歌搜索了一個可以應用於我的情況的例子。 我發現了很多使用 2 個 DIV 塊來顯示/隱藏的示例。 我真的需要這樣做，通過修改 html 樣式元素。 有沒有人有一個例子（或提供一個例子的鏈接）來做這種類型的切換display: none文本。

Answer 1

給你的ul一個id ，

<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

然后做

var yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';

如果你使用 jQuery，這將變成：

var $yourUl = $("#yourUlId"); 
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');

最后，您明確表示要操作此 css 屬性，而不是簡單地顯示或隱藏底層元素。 盡管如此，我還是會提到 jQuery

$("#yourUlId").toggle();

將在顯示或隱藏此元素之間交替。

Answer 2

給 UL 一個 ID 並使用 getElementById 函數：

<html>
<body>
    <script>
    function toggledisplay(elementID)
    {
        (function(style) {
            style.display = style.display === 'none' ? '' : 'none';
        })(document.getElementById(elementID).style);
    }
    </script>

<a href="#" title="Show Tags" onClick="toggledisplay('changethis');">Show All Tags</a>
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; ">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

</body>
</html>

Answer 3

其他人已經完美地回答了你的問題，但我只是想我會用另一種方式拋出。 盡可能將 HTML 標記、CSS 樣式和 javascript 代碼分開總是一個好主意。 考慮到這一點，隱藏某些東西的最干凈的方法是使用類。 它允許在它所屬的 CSS 中定義“隱藏”的定義。 使用這種方法，您可以稍后決定是否希望通過使用 CSS transition向上滾動或淡出來隱藏ul ，而無需更改您的 HTML 或代碼。 這是更長的時間，但我覺得這是一個更好的整體解決方案。

演示： http : //jsfiddle.net/ThinkingStiff/RkQCF/

HTML：

<a id="showTags" href="#" title="Show Tags">Show All Tags</a>
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>

CSS：

#subforms {
    overflow-x: visible; 
    overflow-y: visible;
}

.hide {
    display: none; 
}

腳本：

document.getElementById( 'showTags' ).addEventListener( 'click', function () {
    document.getElementById( 'subforms' ).toggleClass( 'hide' );
}, false );

Element.prototype.toggleClass = function ( className ) {
    if( this.className.split( ' ' ).indexOf( className ) == -1 ) {
        this.className = ( this.className + ' ' + className ).trim();
    } else {
        this.className = this.className.replace( new RegExp( '(\\s|^)' + className + '(\\s|$)' ), ' ' ).trim();
    };
};

Answer 4

切換隱藏元素 ID 結束類名...

function toggleElem(newElem) {
    var elem = document.getElementById('' + newElem + '');
    var eIdent = (elem != null) ? ('#' + newElem) : ('.' + newElem);
    elem = document.querySelector('' + eIdent + '');
    elem.style.display = (elem.style.display != 'none') ? 'none' : 'block';
}

您可以直接從此鏈接進行測試： https : //codepen.io/pedro404/pen/VwmPBee

Answer 5

您可以通過直接使用 javascript 和 DOM 來做到這一點，但我真的建議您學習 JQuery。 這是一個可用於實際切換該對象的函數。

http://api.jquery.com/toggle/

編輯：添加實際代碼：

解決方案：

HTML 片段：

<a href="#" id="showAll" title="Show Tags">Show All Tags</a>
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; ">
    <li>Tag 1</li>
    <li>Tag 2</li>
    <li>Tag 3</li>
    <li>Tag 4</li>
    <li>Tag 5</li>
</ul>

使用來自 Google 內容分發網絡的 JQuery 的 Javascript 代碼： https : //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

$(function() {
    $('#showAll').click(function(){  //Adds click event listener  
        $('#tags').toggle('slow'); // Toggles visibility.  Use the 'slow' parameter to add a nice effect.
    });
});

您可以直接從此鏈接進行測試： http : //jsfiddle.net/vssJr/5/

對 JQuery 的補充評論：

有人建議將 JQuery 用於這樣的事情是錯誤的，因為它是一個 50k 庫。 我對此持強烈反對意見。

JQuery 被廣泛使用，因為它提供了巨大的優勢（就像許多其他 javascript 框架一樣）。 此外，JQuery 由內容分發網絡 (CDN) 托管，例如Google 的 CDN ，這將保證庫緩存在客戶端的瀏覽器中。 它對客戶端的影響很小。

此外，通過 JQuery，您可以使用強大的選擇器、添加事件偵聽器，並使用大部分保證跨瀏覽器的函數。

如果你是初學者，想學習Javascript，請不要小看JQuery這樣的框架。 它會讓你的生活變得更輕松。

Answer 6

您可以通過使用 .css 屬性使用 jquery 輕松完成此操作...試試這個： http : //api.jquery.com/css/

切換顯示：無樣式與 JavaScript

問題描述

5 個解決方案

解決方案1
103 已采納 2011-12-10 03:17:01

解決方案2
14 2011-12-10 03:36:37

解決方案3
6 2011-12-10 06:26:24

解決方案4
0 2021-03-08 20:29:52

解決方案5
-2 2011-12-10 03:16:25

解決方案6
-4 2011-12-10 04:25:48

切換顯示：無樣式與 JavaScript

問題描述

5 個解決方案

解決方案1 103 已采納 2011-12-10 03:17:01

解決方案2 14 2011-12-10 03:36:37

解決方案3 6 2011-12-10 06:26:24

解決方案4 0 2021-03-08 20:29:52

解決方案5 -2 2011-12-10 03:16:25

解決方案6 -4 2011-12-10 04:25:48

解決方案1
103 已采納 2011-12-10 03:17:01

解決方案2
14 2011-12-10 03:36:37

解決方案3
6 2011-12-10 06:26:24

解決方案4
0 2021-03-08 20:29:52

解決方案5
-2 2011-12-10 03:16:25

解決方案6
-4 2011-12-10 04:25:48