jQuery - वर्टिकल अप टॉगल (यानी नीचे नहीं)

मुझे एक टॉगल बनाने की आवश्यकता है जो "सामान्य" टॉगल के विपरीत दूसरे शब्दों में नीचे की ओर एनिमेट नहीं करता है। शायद सरल है कि सामान्य स्लाइड टॉगल इत्यादि के रूप में स्लाइड डाउन करने के बजाय टॉगल को मेनू आइटम (यह एक मेनू है) के ऊपर स्लाइड करना चाहिए। मैं इस के साथ लगभग वहाँ हूँ:jQuery - वर्टिकल अप टॉगल (यानी नीचे नहीं)

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

लेकिन अगर आप "टॉगल" एक आइटम तब एक और आइटम दूसरे मद (नीचे स्लाइड) 300px गुणा हो जाता है नहीं (जन्म देती है) स्लाइड 300px गुणा। मैं जो हासिल करना चाहता हूं उसका एक अच्छा उदाहरण (साइट से नफरत है) http://market.weogeo.com/#/home और नीचे "टैब" है।

मेरे एचटीएमएल कोड

<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>

उपयोग कर रहा है सीएसएस पक्ष

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

और

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

कोई भी विचार पर?

यह अच्छा होगा अगर प्रत्येक "क्लिक" ने "क्लिक" टॉगल खोलने से पहले पिछले टॉगल को बंद कर दिया।

स्रोत

2011-01-01 Russell Parrott

यहां नीचे पोस्ट किए गए लोगों का मेरा संपादन संस्करण है: डी http://jsfiddle.net/s7AD8/2/ – Cristy

@ क्रिस्टी ओह, मैं आपको नफरत करता हूं :-) जो "सही" है और मैंने जो कुछ बनाया है, लेकिन मुझे मिलता है यह सिर्फ स्लाइड टॉगल का उपयोग करने के लिए काम करने के लिए - एनिमेट की कोई ज़रूरत नहीं है - जब तक कि मुझे कुछ याद नहीं आ रहा है? –

हाँ, एनिमेट करने की कोई ज़रूरत नहीं है, मैंने अभी इसका उपयोग किया है क्योंकि नीचे पोस्ट किया गया उदाहरण इसका उपयोग करता है :)) – Cristy

यदि आप फिलर के बजाय अपनी सूचियों के लिए वास्तविक सीएसएस प्रदान करते हैं तो मैं एक और विशिष्ट उत्तर दे सकता हूं।

मूल रूप से, आप 0 को ul#coltab ul की bottom गुण सेट करना चाहते हैं।

जेनेरिक उदाहरण:http://jsfiddle.net/s7AD8/

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

यह यह एक ऊपर की दिशा में चेतन का कारण होगा।

$("#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'); 

});

और जोड़ने के लिए एक नया सीएसएस वर्ग:

स्रोत

2011-01-01 15:36:46 user113716

@patrick dw - oops उस स्थिति के बारे में खेद है; नीचे: 0 पीएक्स; –

@Russell: यह काम करना चाहिए। मैंने ऊपर की एनीमेशन प्रदर्शित करने के लिए एक सामान्य उदाहरण जोड़ा। यदि आपका 'नीचे: 0' के साथ ऐसा नहीं करता है, तो आपको समस्या को पुन: उत्पन्न करने के लिए आवश्यक कोड प्रदान करना होगा। – user113716

@patrick dw - धन्यवाद "वहां रहा" मुझे लगता है कि यह तथ्य हो सकता है कि यह उल में है लेकिन यहां कोड है:

विशेषताएं
- Lorem ipsum dolor sit amet, consectetur adipiscing elit। Pellentesque sed neque eu परिणामस्वरूप स्केलेरिसक एट एसीआई बैठे हैं।
ब्लॉग
- Lorem ipsum dolor sit amet, consectetur adipiscing elit।

उल # कोल्टब उल {प्रदर्शन: कोई नहीं; स्थिति: पूर्ण; जेड इंडेक्स: 998; मार्जिन: 0 पीएक्स; नीचे: 0 पीएक्स; पैडिंग: 0 पीएक्स; सूची-शैली: कोई नहीं; } –

"- = 300px" आगे बेहतर महसूस होगा एक precalculated वर जा रहा है .. (तुम भी तार में गणना संभाल कर सकते हैं?)

अगर आप उन्हें स्वतंत्र रूप से चालाकी से करना चाहते हैं मैं कल्पना करता आप एक बहुत होगा जिन हिस्सों को आप संभालना चाहते हैं, उनके लिए आईडी प्रदान करके आसान समय

स्रोत

2011-01-01 15:31:49 Mantar

हाँ +/- = 300 पीएक्स पूर्ववर्ती var के रूप में बेहतर होगा, लेकिन यूएल को तब तक प्रदर्शित नहीं किया जाता जब तक कि इसे टॉगल नहीं किया जाता ऊंचाई तो आप (ठीक है मैं नहीं कर सकता) ऊंचाई(); इसे पूर्व-गणना करने के लिए यदि यह किया जा सकता है - आम तौर पर - जानना और सीखना अच्छा लगेगा। टिप्पणी के लिए Thks –

* "क्या आप तारों में गणना भी संभाल सकते हैं?" * हाँ, jQuery आपको एनिमेशन में ऐसा करने देता है। – user113716

@ पैट्रिक: मैं देखता हूं ... इससे मुझे मेरे प्रोजेक्ट में कुछ नए विकल्प मिलते हैं ^^ धन्यवाद – Mantar

यह एक प्रयास करें

#coltab ul.open { display: block; }

Test it here

स्रोत

2011-01-01 16:06:41 steffenbew

मैंने देखा है .डेटा (''); पहले लेकिन यह सुनिश्चित नहीं है कि यह क्या है, लेकिन आपके उदाहरण से मैं अनुमान लगा सकता हूं कि यह "सामग्री" या डेटा की ऊंचाई को शांत करता है लेकिन यहां तक कि अगर सीएसएस कोई प्रदर्शित नहीं करता है? –

दस्तावेज़ीकरण पर एक नज़र डालें: http://api.jquery.com/jQuery.data/ - "निर्दिष्ट तत्व से जुड़े मनमानी डेटा स्टोर करें।" | तो यह कोड स्निपेट मूल ऊंचाई को संग्रहीत कर रहा है उपयुक्त शीर्ष स्थिति को एनिमेट करने के लिए, जिन वस्तुओं को टॉगल करने की आवश्यकता है, – steffenbew

यह सही है। +1। –

अगर आप उल और ली रिक्त करने की आवश्यकता तुम भी एक अलग तरह से उपयोग कर सकते हैं कुछ और के लिए:

<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>

स्रोत

2011-03-03 23:54:55 SnTYaD

jQuery - वर्टिकल अप टॉगल (यानी नीचे नहीं)

उत्तर

संबंधित मुद्दे