Bật tắt hiển thị: không có kiểu nào với JavaScript

Tôi muốn thay đổi kiểu (dòng thứ hai bên dưới) để xóa phần display: none; khi người dùng nhấp vào liên kết "Hiển thị tất cả thẻ". Nếu người dùng nhấp lại vào liên kết "Hiển thị tất cả thẻ", tôi cần văn bản display: none; được thêm lại vào câu lệnh "kiểu ...".Bật tắt hiển thị: không có kiểu nào với JavaScript

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

Tôi đã tìm kiếm ở đây và Google ví dụ tôi có thể áp dụng cho trường hợp của mình. Tôi đã tìm thấy rất nhiều ví dụ bằng cách sử dụng 2 khối DIV để hiển thị/ẩn. Tôi thực sự cần phải làm theo cách này, bằng cách sửa đổi phần tử kiểu html. Có ai có một ví dụ (hoặc cung cấp một liên kết đến một ví dụ) mà loại hình này chuyển đổi wtih văn bản display: none.

Nguồn

2011-12-10 Josh Bond

Bạn đang sử dụng jQuery? – jQuerybeast

Cho bạn ul một id,

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

sau đó làm

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

NẾU bạn đang sử dụng jQuery, điều này trở thành:

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

Cuối cùng, bạn đặc biệt nói bạn muốn thao túng ulate thuộc tính css này, và không chỉ hiển thị hoặc ẩn phần tử cơ bản. Tuy nhiên, tôi sẽ đề cập đến điều đó với jQuery

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

sẽ luân phiên giữa hiển thị hoặc ẩn phần tử này.

Nguồn

2011-12-10 03:17:01

-2

Bạn có thể thực hiện điều này thông qua javascript và DOM thẳng, nhưng tôi thực sự khuyên bạn nên học JQuery. Đây là một hàm bạn có thể sử dụng để thực sự chuyển đổi đối tượng đó.

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

EDIT: Thêm mã thực tế:

Giải pháp:

đoạn mã 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>

javascript mã sử dụng JQuery từ mạng phân phối nội dung của Google: 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. 
    }); 
});

Bạn có thể kiểm tra trực tiếp từ liên kết này: http://jsfiddle.net/vssJr/5/ Comments

thêm về JQuery:

Có người đã gợi ý rằng việc sử dụng JQuery cho một cái gì đó như thế này là sai vì nó là một 50k Thư viện . Tôi có một ý kiến mạnh mẽ chống lại điều đó.

JQuery được sử dụng rộng rãi vì những lợi thế rất lớn mà nó cung cấp (giống như nhiều khung javascript khác). Ngoài ra, JQuery được lưu trữ bởi Mạng phân phối nội dung (CDN) như Google's CDN để đảm bảo rằng thư viện được lưu trong bộ nhớ cache trong trình duyệt của khách hàng. Nó sẽ có tác động tối thiểu trên máy khách.

Ngoài ra, với JQuery, bạn có thể sử dụng bộ chọn mạnh mẽ, thêm trình xử lý sự kiện và sử dụng các chức năng được đảm bảo là trình duyệt chéo.

Nếu bạn là người mới bắt đầu và muốn tìm hiểu Javascript, vui lòng không giảm các khung như JQuery. Nó sẽ làm cho cuộc sống của bạn dễ dàng hơn nhiều.

Nguồn

2011-12-10 03:16:25 agarcian

Cho UL một ID và sử dụng chức năng 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>

Nguồn

2011-12-10 03:36:37 marcocamejo

Đây là cách được khuyến nghị và hợp lý để thực hiện việc này và nên được chọn làm câu trả lời hay nhất. Bạn không cần thư viện jQuery 50K để làm điều này. – Rob

@Rob - người đã nói bạn cần thư viện jQuery 50K để thực hiện việc này? –

@AdamRackis - Mọi người đề xuất sử dụng jQuery để thực hiện việc này. – Rob

-3

bạn có thể làm điều này một cách dễ dàng bằng cách sử dụng jquery sử dụng tài sản .css ... thử này một: http://api.jquery.com/css/

Nguồn

2011-12-10 04:25:48 kalpesh

Những người khác đã trả lời câu hỏi của bạn hoàn hảo, nhưng tôi chỉ nghĩ rằng tôi sẽ ném ra một cách khác. Bạn nên tách biệt đánh dấu HTML, tạo kiểu CSS và mã javascript khi có thể. Cách sạch nhất để che giấu điều gì đó, với ý nghĩ đó, đang sử dụng một lớp học. Nó cho phép định nghĩa "ẩn" được định nghĩa trong CSS nơi nó thuộc về. Sử dụng phương pháp này, sau này bạn có thể quyết định bạn muốn ul ẩn bằng cách cuộn lên hoặc mờ dần bằng cách sử dụng CSS transition, tất cả mà không thay đổi mã HTML hoặc mã của bạn. Điều này dài hơn, nhưng tôi cảm thấy đó là một giải pháp tổng thể tốt hơn.

Demo: 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; 
}

Script:

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(); 
    }; 
};

Nguồn

2011-12-10 06:26:24 ThinkingStiff

Còn về 'document.getElementById ('# potato'). ClassList.toggle ('hide')' thay vì tạo một mẫu thử nghiệm? – JeromeJ

@JeromeJ '.toggle()' không phải là một hàm Javascript (có một jQuery '.toggle()'). Ngoài ra, '.getElementById()' sẽ không lấy ký pháp băm (cũng là jQuery). – ThinkingStiff

oups về băm! Mặc dù, '.toggle()' * DOES * tồn tại trong JavaScript (tôi sử dụng nó trên trang web của tôi) nhưng nó có tác dụng tương tự có 'toggleClass' từ jQuery, do đó, nó không bị nhầm lẫn với' .toggle của jQuery () '. jQuery để js lựa chọn thay thế: http://toddmotto.com/is-it-time-to-drop-jquery-essentials-to-learning-javascript-from-a-jquery-background/ – JeromeJ

Bật tắt hiển thị: không có kiểu nào với JavaScript

Trả lời

Các vấn đề liên quan