jQuery शो() विधि प्रदर्शित करने के लिए "li" प्रविष्टियों को रीसेट करता है: ब्लॉक

मेरे पास अपेक्षाकृत सरल पृष्ठ है जिसमें कुछ LI प्रविष्टियां हैं जिन्हें मैं क्लिक पर दिखाने में सक्षम होना चाहता हूं। विचार PowerPoints तर्क को अनुकरण करना है जहां पृष्ठ पर क्लिक करते समय तत्वों के समूह प्रकट होते हैं।jQuery शो() विधि प्रदर्शित करने के लिए "li" प्रविष्टियों को रीसेट करता है: ब्लॉक

में "क्लिक()" "div" तत्व माता पिता के लिए हैंडलर मेरे पास है:

$(function() { 
    var currentReveal; 
    var currentGroup = 1; 

    currentReveal = $("[class*=Revealed]").hide().length; 
    $("div").click(function() { 
    if (currentReveal != 0) { 
     var revealedElements = $("[class*=Revealed]").filter("[revealgroup='" + 
           currentGroup + "']"); 
     $(revealedElements).show("normal"); 
     currentGroup += 1; 
     currentReveal -= revealedElements.length; 
    } 
});

एचटीएमएल है कि इस पर काम कर रहा है है:

<div class="Body"> 
    <ul> 

    <li>Lorem Ipsus</li> 
    <ul> 
     <li class="RevealedList" revealgroup="1" >Lorem Ipsus:</li> 
     <ul class="Revealed" revealgroup="1"> 
      <li>Lorem Ipsus.</li> 
      <li>Lorem Ipsus.</li> 
     </ul> 
     <li class="RevealedList" revealgroup="1">Lorem Ipsus</li> 
    </ul> 
    </div>

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

स्रोत

2009-11-25 Larry Osterman

हम्म ... मैंने बस jQuery के बग डेटाबेस को देखा और पाया: http://dev.jquery.com/ticket/5130 जो दर्शाता है कि यह एक jQuery बग हो सकता है। –

बस एक फिक्स के साथ टिकट अपडेट किया गया: http://dev.jquery.com/ticket/5130#comment:3 – PetersenDidIt

धन्यवाद petersendidit। –

जब आप .hide() करते हैं, अपने li तत्वों display:hide मिलता है, तो .show() उन्हें display:block करने के लिए सेट क्योंकि पिछले display संपत्ति के मूल्य खो गया है। तो अगर आप दो विकल्प हैं:

li से निकालें खुलासा तरह वर्गों और उन्हें ul या अन्य कंटेनर तत्व यह है कि block या
.show() के बजाय करने के लिए display सेट प्राप्त करने में सक्षम है में डाल दिया, कोशिश .css({display:'list-item'})

जैसे कुछ का उपयोग करके मैं शायद दूसरे के साथ जाऊंगा।

आप एक .show("normal") की तरह प्रभाव को प्राप्त करना चाहते हैं, आप की तरह

// assume the following var 
var yourstuff = $(/* the stuff you're hiding */); 

// instead of just calling .hide(), store width and height first 
yourstuff.each(function() { 
    $(this).data('orig_w',$(this).width()) 
     .data('orig_h',$(this).height()) 
}).hide() 

// then, instead of resetting 'display', animate the stuff 
yourstuff.css({display:'list-item', overflow: 'hidden', width:0, height: 0;}) 
    .animate({width: yourstuff.data('orig_w'), height: yourstuff.data('orig_h')}, 
    "normal", //speed 
    "linear", //easing 
    function() { // in the end, reset 'overflow' to show the bullet 
     yourstuff.css('overflow', 'none'); 
    })

कुछ मुझे आशा है कि इसके बाद के संस्करण का टुकड़ा आप क्या करना है की एक विचार देने के लिए पर्याप्त होना करने के लिए कर सकते हैं।

स्रोत

2009-11-25 00:27:33

आईआईआरसी, यह एक ज्ञात बग है और jQuery के अगले संस्करणों में से एक में तय किया जाना चाहिए। – keithjgrant

मिगुएल: मैं एनीमेशन प्रभाव प्राप्त करना चाहता हूं जो मुझे मिलती है। शो ("सामान्य") हालांकि :(। मैं देखूंगा कि क्या मैं उल पर खुलासा सामान डाल सकता हूं। –

संपादित करने के लिए उत्तर देने का उत्तर बेहतर अनुकरण करें। शो() एनीमेशन चीज़ –

@Larry & @Miguel:

मैं बस एक साधारण स्क्रिप्ट के साथ इस परीक्षण किया है कि hide() और show() है मेरी <li> रों है, और वे "सूची आइटम" में पुन: निर्धारित किया गया। वास्तव में, यदि आप jQuery के स्रोत कोड को देखो, show() पद्धति पर, आप देखेंगे:

jQuery.fn.extend({ 
show: function(speed,callback){ 
/* ... */ 
var old = jQuery.data(this[i], "olddisplay"); 
/* ... */ 
jQuery.data(this[i], "olddisplay", display);

और अगर आप hide() विधि को देखो, आप देखेंगे कि यह वास्तव में मूल्य ओ display किसी से सेट करने से पहले की बचत होती है :

var old = jQuery.data(this[i], "olddisplay"); 
if (!old && old !== "none") 
    jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));

कोड मैं Firebug के साथ यह परीक्षण करने के लिए प्रयोग किया है:

<script type="text/javascript"> 
    $(function() { 
     $("li").click(function() { 
     $("li").hide(); 
     $("li").show();}) 
    }); 
</script> 

<body> 
    <ul> 
     <li>foo</li> 
     <li>foo</li> 
    </ul> 
</body>

क्या आप वाकई समस्या आप की गिरफ्तारी की पुष्टि कर सकते हैं ई के बारे में बात कर रहे हैं? शायद कुछ महत्वपूर्ण है जो मुझे नहीं मिला, या आपने हमें नहीं बताया।

शुभकामनाएं!

स्रोत

2009-11-25 00:37:11

डिस्प्ले शो में "ब्लॉक" पर सेट किया जा रहा है - कोड "अगर (प्रदर्शन ===" कोई नहीं ") प्रदर्शन =" ब्लॉक " ; निष्पादन कर रहा है। मेरा मानना है कि इस स्थान पर कोड ऊपर वर्णित कोड होना चाहिए (jQuery.data (यह ...)। –

आप jQuery पर कुछ ब्रेकपॉइंट्स सेट करने का प्रयास कर सकते हैं ताकि यह देखने के लिए कि क्या हो रहा है। कोशिश करें! यह दिलचस्प है। –

@ लैरी: असल में वह पंक्ति जो आपने हाइलाइट की है वह महत्वहीन है। मैंने जो कोड दिखाया है, उसमें 'li' तत्वों की डिस्प्ले शैली आपको हाइटलाइट करने से पहले लगभग 10 लाइनें सेट करती है:' var old = jQuery। डेटा (यह [i], "olddisplay"); यह [i] .style.display = पुराना || ""; इसके बाद, अगर यह डिस्प्ले को 'olddisplay' मान पर रीसेट नहीं कर सका, तो यह आपके द्वारा हाइलाइट किए गए कोड के रूप में ब्लॉक करने के लिए सेट करेगा। कोड के मामले में नहीं मैंने आपको दिखाया है ... –

मैं इस में कुछ वर्ष का एहसास है, लेकिन मैं यह आज का सामना करना पड़ा:

jQuery .show() और .hide()<li> तत्व का उचित प्रदर्शन-संपत्ति बहाल है, लेकिन केवल जब यह एनिमेट नहीं।

आईई, बस .hide() और .show() पर कॉल करने से list-item पर पुनर्स्थापित हो जाएगा।

लेकिन .show(250) पर कॉल करने से block पर पुनर्स्थापित हो जाएगा।

स्रोत

2011-11-15 10:09:57 mark

jQuery शो() विधि प्रदर्शित करने के लिए "li" प्रविष्टियों को रीसेट करता है: ब्लॉक

उत्तर

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