jQuery - chuyển đổi dọc lên (tức là không xuống)

Tôi cần phải tạo nút chuyển đổi hoạt ảnh lên trên không hướng xuống dưới nói cách khác là đảo ngược nút chuyển "bình thường". Có lẽ đơn giản hơn là chuyển đổi nên trượt lên trên mục trình đơn (đó là một menu) để trở thành có thể nhìn thấy chứ không phải là trượt xuống như slideToggle bình thường vv sẽ làm. Tôi gần như có với điều này:jQuery - chuyển đổi dọc lên (tức là không xuống)

var opened = false; 
$("#coltab li").click(function(){ 
    if(opened){ 
     $(this).children('ul').animate({"top": "+=300px"}); 
    } else { 
     $(this).children('ul').animate({"top": "-=300px"}); 
    } 
    $(this).children('ul').children().slideToggle('slow'); 
    $(this).children('ul').toggle(); 
    opened = opened ? false : true; 
});

NHƯNG nếu bạn "bật tắt" một mục THEN một mục mục thứ hai (trượt xuống) rơi bởi 300px KHÔNG trượt lên (tăng) bởi 300px. Một ví dụ hay (ghét trang web) về những gì tôi muốn đạt được là http://market.weogeo.com/#/home và "tab" ở dưới cùng.

HTML code tôi đang sử dụng

<ul id="#coltab"> 
<li>Item 1 
<ul> 
<li>This bit needs to toggle up</li> 
</ul> 
</li> 
<li>Item 2 
<ul> 
<li>This bit needs to toggle up</li> 
</ul> 
</li> 
etc ... 
</ul>

Về phía CSS

ul#coltab { position: relative' blah; blah; }

và

ul#coltab ul { display: none; position: absolute; blah; blah; }

Bất kỳ ý tưởng?

Sẽ thật tuyệt nếu mỗi "nhấp chuột" đóng nút chuyển đổi trước đó trước khi mở nút chuyển đổi "được nhấp".

Nguồn

2011-01-01 Russell Parrott

Đây là phiên bản chỉnh sửa của những người được đăng bên dưới: D http://jsfiddle.net/s7AD8/2/ – Cristy

@Cristy Ohhh Tôi ghét bạn :-) đó là "đúng" và nhiều thứ tôi đã tạo "" nhưng tôi nhận được nó để làm việc chỉ bằng cách sử dụng slideToggle - không cần cho animate - trừ khi tôi đang thiếu một cái gì đó? –

Vâng, không cần animate, tôi chỉ sử dụng điều đó vì ví dụ được đăng dưới đây sử dụng :)) – Cristy

Tôi có thể đưa ra câu trả lời cụ thể hơn nếu bạn đã cung cấp CSS thực tế cho danh sách của mình thay vì phụ.

Về cơ bản, bạn sẽ muốn đặt thuộc tính bottom của ul#coltab ul thành 0.

Generic dụ:http://jsfiddle.net/s7AD8/

ul#coltab ul { 
    position:absolute; 
    bottom:0; 
    /*...and so on*/ 
}

Điều này sẽ gây ra nó để animate theo hướng lên trên.

Nguồn

2011-01-01 15:36:46 user113716

@patrick dw - oops xin lỗi về vị trí đó là tuyệt đối; dưới cùng: 0px; –

@Russell: Điều đó sẽ hiệu quả. Tôi đã thêm một ví dụ chung để chứng minh hoạt hình trở lên. Nếu bạn không làm điều đó với 'bottom: 0', thì bạn sẽ cần phải cung cấp mã cần thiết để tạo lại vấn đề. – user113716

@patrick dw - cảm ơn "đã có" Tôi nghĩ rằng nó có thể là một thực tế rằng nó là của ul nhưng đây là mã anyhow:

Tính năng
- Lorem ipsum dolor ngồi amet, consectetur adipiscing elit. Pellentesque sed neque eu est hậu quả scelerisque ngồi amet ac orci.
Blog
- Lorem ipsum dolor ngồi amet, consectetur adipiscing elit.

ul # coltab ul {display: none; vị trí: tuyệt đối; chỉ số z: 998; lề: 0px; dưới cùng: 0px; padding: 0px; kiểu danh sách: none; } –

"- = 300px" sẽ cảm thấy tốt hơn là một var precalculated .. (Bạn có thể thậm chí xử lý tính toán trong chuỗi?)

Hơn nữa nếu bạn muốn thao túng họ một cách độc lập Tôi muốn tưởng tượng bạn sẽ có một nhiều thời gian dễ dàng hơn bằng cách cung cấp ID cho các phần bạn muốn xử lý

Nguồn

2011-01-01 15:31:49 Mantar

yes +/- = 300px sẽ tốt hơn là var được tính trước, NHƯNG vì UL không hiển thị cho đến khi bật chiều cao để bạn (OK tôi không thể làm) chiều cao(); để tính toán trước nó Nếu điều đó có thể được thực hiện - nói chung - rất thích biết và học hỏi. Thks for comment –

* "Bạn có thể xử lý các tính toán trong chuỗi không?" * Có, jQuery cho phép bạn thực hiện việc này trong hoạt ảnh. – user113716

@Patrick: Tôi hiểu ... Điều đó cho tôi một số tùy chọn mới trong dự án của tôi ^^ Cảm ơn – Mantar

Hãy thử điều này một:

$("#coltab li ul").each(function (index) { 
    $(this).data('height', $(this).outerHeight());  
}); 

$("#coltab li").click(function() { 

    $("#coltab li ul.open").animate({"top": 0}, function() { 
     $(this).removeClass('open'); 
    }); 

    var itemHeight = $(this).children('ul').data('height'); 
    $(this).find('ul:not(.open)').animate({"top": -itemHeight}).addClass('open'); 

});

Và thêm một lớp css mới:

#coltab ul.open { display: block; }

Test it here

Nguồn

2011-01-01 16:06:41 steffenbew

Tôi đã thấy .data (''), trước nhưng không chắc nó là gì, nhưng từ ví dụ của bạn tôi có thể đoán nó làm chiều cao của "nội dung" hoặc dữ liệu nhưng thậm chí nếu css hiển thị không? –

Hãy xem tài liệu: http://api.jquery.com/jQuery.data/ - "Lưu trữ dữ liệu tùy ý được liên kết với phần tử được chỉ định." | Vì vậy, đoạn mã này đang lưu trữ chiều cao ban đầu của các mục cần được bật, để làm động cho vị trí trên cùng thích hợp sau này – steffenbew

Đây là dạng HOÀN THÀNH. –

Bạn cũng có thể sử dụng một cách khác nhau nếu bạn cần để giải phóng ul và li cho cái gì khác:

<style> 
body { margin: 100px 50px; } 

#coltab { position: relative; text-align: center; } 

#coltab > li { 
    background: #ccc; 
    color: #444; 
    cursor: pointer; 
    display: block; 
    float: left; 
    margin: 0 10px; 
    padding: 10px 20px; 
    position: relative; 
    width: 100px; 
} 

#coltab span { 
    background: #eee; 
    color: #222; 
    display: none; 
    padding: 5px; 
    position: absolute; 
    left: 0; 
    right; 0; 
    top: 0; 
    z-index: -1; 
} 

#coltab span.open { display: block; } 

</style> 

<head> 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"> </script> 

</head> 

<body> 



<div id="coltab"> 
    <li>Item 1<br/>(click me) 
      <span>This first item needs to toggle up</span> 
    </li> 
    <li>Item 2<br/>(click me) 
      <span>This second item needs to toggle up</span> 
    </li> 
</div> 

<script> 
$(document).ready(function() { 
$("#coltab li span").each(function (index) { 
    $(this).data('height', $(this).outerHeight());  
}); 

$("#coltab li").click(function() { 

    $("#coltab li span.open").animate({"top": 0}, function() { 
     $(this).removeClass('open'); 
    }); 

    var itemHeight = $(this).children('span').data('height'); 
    $(this).find('span:not(.open)').animate({"top": -itemHeight}).addClass('open'); 

}); 
}); 
</script> 
</body>

Nguồn

2011-03-03 23:54:55 SnTYaD

jQuery - chuyển đổi dọc lên (tức là không xuống)

Trả lời

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