2011-12-13 17 views
23

Tôi đang tìm kiếm sự phù hợp, đơn giản, mã nhỏ để làm những điều sau đây:jQuery Simple Ráp Div?

  • Bấm vào phần tử với Class Áp dụng cho nó.

  • DIV.CLASS - Mở rộng và hiển thị nội dung ẩn. (slideDown - Toggle)

  • DIV.CLASS - Thu gọn và ẩn nội dung hiển thị trước đó. (SlideUp - Chuyển đổi)

tôi đã tạo ra một jsFiddle đây: http://jsfiddle.net/Q4PUw/1/

Vì vậy, để được mơ hồ và dễ dàng, tôi cần phải biết làm thế nào để có được một CLASS DIV để trở thành ẩn và có thể nhìn thấy một lần một yếu tố trên cùng một trang có một CLASS được áp dụng cho nó, trong đó sẽ kích hoạt và hủy kích hoạt HIDDEN và hoặc nội dung HTML VISIBLE. Và tôi cần nó được ẩn theo mặc định.

Tôi đã xem tất cả qua internet và chỉ tìm thấy các tập lệnh rất phức tạp, nhưng không có gì đơn giản. Tôi đã tìm thấy Accordians đơn giản ... Nhưng những người không bao giờ gần gũi, họ chỉ cần mở một số khác.

Cảm ơn tất cả các bạn đã giúp đỡ và tôi hy vọng rằng tôi có thể trả lời câu hỏi này tương tự cho nhiều người khác ...

Lưu ý: Tôi biết rất ít JavaScript và jQuery hoặc thậm chí.

Trả lời

60
$('.expand-one').click(function(){ 
    $('.content-one').slideToggle('slow'); 
}); 

Demo: http://jsfiddle.net/Q4PUw/2/

+0

Cảm ơn bạn rất nhiều !!! :-D –

+1

Vui mừng được giúp đỡ :) – AlienWebguy

+0

Có phải tôi hoặc tải nhanh hơn bằng cách sử dụng "slideToggle" sau đó sử dụng .accordion? – Ben

7

tôi đang tìm kiếm tại này và muốn có một div collapsible đó đã được thiết kế riêng cho tôi. Sau đó, tôi nhận ra những gì tôi muốn là một cửa sổ duy nhất jquery-ui accordion.

<div id="collapse"> 
    <h3>Collapse and Expand</h3> 
    <div>Content</div> 
</div> 
<script> 
$("#collapse").accordion({ 
    collapsible: true, 
    active: false 
}); 
</script> 

http://jsfiddle.net/MB4ch/1/

+3

Lưu ý, đây là jQueryUI, không phải jQuery đơn giản. –

2

tôi muốn làm điều này với nhiều divs, mỗi kích hoạt riêng của họ. Dựa trên câu trả lời của AlienWebguy trên:

HTML

<div> 
    <p class="expand" id="expand-1">more 1...</p> 
</div> 
<div class="expandable" id="expandable-1"> 
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 
<div> 
    <p class="expand" id="expand-2">more 2...</p> 
</div> 
<div class="expandable" id="expandable-2"> 
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 

Javascript

$('.expand').click(function(){ 
    target_num = $(this).attr('id').split('-')[1]; 
    content_id = '#expandable-'.concat(target_num); 
    $(content_id).slideToggle('fast'); 
}); 

CSS

.expand { 
    font-weight: bold; 
    font-style: italic; 
    font-size: 12px; 
    cursor: pointer; 
} 
.expandable { 
    display:none; 
} 
div { 
    margin: 10px; 
} 

https://jsfiddle.net/Q4PUw/3767/

+0

Chính xác là loại giải pháp đơn giản mà tôi đang tìm kiếm. +1 –

+0

thực sự, tập lệnh này thực hiện một lần cho mỗi mục .expandable trên trang của tôi vì lý do nào đó ... Bất kỳ ý tưởng nào tại sao điều này sẽ xảy ra? –

0

ý tưởng Xấu với chúng tôi e accordion. Tốt hơn là tạo khối có thể thu gọn của riêng bạn.

Ví dụ:

function InitSpoilBlock(idClicked) 
    { 
     $(idClicked).on('click', function(e){ 
      var textArray = ['blind','slide'];//here you can add other effects 

      var randomEffect = textArray[Math.floor(Math.random()*textArray.length)]; 

      $(e.target).parent().children(".HiderPanel").toggle(randomEffect); 
     }); 
    } 

vì vậy khi bạn viết html ví dụ:

<div class="HiderContainer"> 
    <a href="#" class="Hider">More</a> 
    <div class="HiderPanel"> 
     Spoiled block of html 
    </div> 
</div> 

và sau khi tải trang bạn sẽ gọi

InitSpoilBlock('.Hider'); 

tất cả các khối sẽ có thể sụp đổ và ẩn với hoạt ảnh ngẫu nhiên. Hoặc bạn cũng có thể sử dụng một hình động chính xác.