यह संभव एक DIV कि jQuery के "slideUp" समारोह

Question

द्वारा छिपा है मैं (प्रत्येक H3 एक DIV द्वारा पीछा किया जाता) एक साधारण "अकॉर्डियन" प्रकार एच 3 हेडर और DIV सामग्री बक्से की सूची से युक्त पृष्ठ है मुद्रित करने के लिए है। इस पृष्ठ पर मैं छिपी हुई सभी डीवीवी से शुरू करता हूं। जब एक एच 3 पर क्लिक किया जाता है तो नीचे (बाद में) डीआईवी को jQuery के "slideDown" फ़ंक्शन के साथ प्रकट किया जाता है जबकि अन्य सभी डीआईवी "slideUp" फ़ंक्शन के साथ छिपाए जाते हैं।

"slideUp" समारोह निर्दिष्ट DIVs में निम्नलिखित इनलाइन शैली सम्मिलित करता है:

style="display: none;" 

मैं सोच रहा हूँ अगर वहाँ मुझे सभी DIVs का विस्तार एक उपयोगकर्ता पेज प्रिंट जब दिखाने के लिए किसी भी तरह से है (के रूप में जब कोई उपयोगकर्ता जावास्क्रिप्ट अक्षम करता है तो मैं करता हूं)।

मैं यह असंभव है क्योंकि इनलाइन शैली हमेशा किसी अन्य शैली घोषणा पर वरीयता दी जाएगी सोच रहा हूँ।

वहाँ एक और समाधान है?

समाधान

Sugendran's solution महान है और ब्राउज़रों (FF2, IE7 और IE6) मैं अब तक परीक्षण किया है में काम करता है। मुझे पता नहीं था कि इनलाइन शैलियों को ओवरराइड करने का कोई तरीका था, जो मुझे यकीन है कि कुछ ऐसा है जो मैंने पहले देखा है, इसलिए यह पता लगाना बहुत अच्छा है। मैं यह भी देखता हूं कि इसके बारे में this answer here है। मेरी इच्छा है कि खोज नेविगेट करना इतना कठिन नहीं था :-)।

Lee Theobald's solution बहुत अच्छा होगा लेकिन "slideUp" समारोह शैली = कहते हैं, "प्रदर्शन: कोई नहीं;" बिट।

My solution ठीक काम करता है, लेकिन जब! महत्वपूर्ण घोषणा काम करता है overkill है।

Answer 1

आप सीएसएस में महत्वपूर्ण खंड का उपयोग कर सकते हैं। यह इनलाइन शैली को ओवरराइड करेगा।

तो अगर आप सेटअप एक प्रिंट मीडिया स्टाइलशीट - आप की तरह

div.accordian { display:block !important; } 

Answer 2

हां।

प्रस्तुत होने पर तो जैसे सभी प्रासंगिक DIVs करने के लिए एक श्रेणी (उदाहरण "HideMe") जोड़ें:

$('div#accordion> div').addClass('hideme'); 

एनबी: इसका मतलब है कि अकॉर्डियन ठीक खराब हो जब जावास्क्रिप्ट अक्षम है।

इस तरह से आप अपने नियमित स्टाइलशीट इस तरह "HideMe" वर्ग निर्दिष्ट कर सकते हैं में:

div.hideme { display: block; } 

: अपने प्रिंट स्टाइलशीट इस तरह "HideMe" वर्ग निर्दिष्ट कर सकते हैं जबकि

.hideme { display: none; } 

अगला, 'क्लिक' फ़ंक्शन में आप प्रत्येक एच 3 में जोड़ते हैं, डीआईवी को स्लाइड करने के बाद, "हिडेम" कक्षा जोड़ें और फिर प्रत्येक डीवी से "शैली" विशेषता को हटा दें जो फिसल गया था।

<script type="text/javascript"> 
//<![CDATA[ 
    $(function() { 
     $('#accordion> div').addClass('hideme'); 

     $('#accordion> h3').click(function() { 
      $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast', function(){ $('#accordion> div:hidden').addClass('hideme').removeAttr('style'); }); 

     }); 
    }); 
//]]> 
</script> 

नोट ताकि शैली और वर्ग परिवर्तन होते हैं के बाद DIV अप slided है और jQuery जोड़ा गया है slideUp समारोह में समारोह कॉलबैक शामिल करने के लिए की जरूरत है:

इस के लिए समग्र jQuery इस तरह दिखता है "शैली = प्रदर्शन: कोई नहीं;"

Answer 3

कुछ कर सकते हैं मैं इस एक अलग तरह से व्यक्तिगत रूप से करना चाहते हैं। JQuery के बजाय इनलाइन शैली को जोड़ने के बजाय, इसे कक्षा के बजाय क्यों नहीं मिला?

<div class="closed">...</div> 

तो फिर तुम दो स्टाइलशीट हो सकता है: प्रिंट के लिए स्क्रीन के लिए एक, एक:

<link href="screen.css" rel="stylesheet" type="text/css" media="screen,projection"/> 
<link href="print.css" rel="stylesheet" type="text/css" media="print"/> 

अपने screen.css में आप बंद निर्धारित करेंगे ...

div.closed { display: none; } 

लेकिन आपके print.css में आप नहीं करेंगे (या आप डिस्प्ले छोड़ देंगे: कोई भी नहीं)। इस तरह जब सभी divs को मुद्रित करने की बात आती है तो विस्तारित किया जाएगा लेकिन स्क्रीन पर, वे बंद हो जाएंगे।

Answer 4

{प्रदर्शन: ब्लॉक! महत्वपूर्ण; } एफएफ में काम करता है, लेकिन मैंने कहीं पढ़ा है कि यह ie6 के साथ काम नहीं करेगा। प्रिंटिंग के लिए कोई जावास्क्रिप्ट घटना नहीं है? मुझे पहले एक के लिए बड़े पैमाने पर देखना याद आ रहा है और एक नहीं मिला, यह पागल लगता है कि यह अस्तित्व में नहीं है, जेएस को पता है कि ब्राउजर के अंदर और कुछ भी होता है, लेकिन किसी कारण से प्रिंट करने के लिए अंधेरा है :(

ब्रेंट @ mimoYmima.com

Answer 5

अकॉर्डियन अंदर सभी तत्वों सभी divs अंदर कवर किया जाएगा 'ब्लॉक के रूप में प्रदर्शन' बनाना

#accordion > *{ display:block !important; }