jQuery और CSS - निकालें / प्रदर्शन जोड़ें: कोई नहीं

Question

मैं इस वर्ग के साथ एक div है:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

और मैं कुछ jQuery तरीकों के साथ उस प्रदर्शन को हटा देना चाहता हूं: कोई नहीं; (इसलिए div दिखाया जाएगा) और इसे फिर से जोड़ने के लिए (ताकि div छाया होगा)।

मैं यह कैसे कर सकता हूं? चियर्स

Comments

jQuery $(".news").show()? "तो डिव शैडो" ... आपका मतलब है कि यह फीका होगा ??

— JCOC611

हाँ $(".news").show()काम करता है! वही $(".news").hide()!!! धन्यवाद;)

— अंक

आप एक कथन के साथ $('.news').toggle();

— निंदा

Jquery का उपयोग करके सीएसएस प्रदर्शन को बदलने या संपत्ति को अवरुद्ध करने

— हेट्रिक बंदर

Answer 1

छिपाने के लिए div

$('.news').hide();

या

$('.news').css('display','none');

और दिखाने के लिए div:

$('.news').show();

या

$('.news').css('display','block');

Comments

$ ( '। खबर') सीएसएस ( 'प्रदर्शन', 'ब्लॉक')। मेरे लिए काम किया! धन्यवाद शेहल!

— जितेश सोजित्रा

मैं सीएसएस में 'डिस्प्ले' स्टाइल को पहले स्थान पर सेट करने और 'ब्लॉक' न करने के लिए कैसे रीसेट करूं?

— 15:22 बजे ed22

Answer 2

jQuery आपको प्रदान करता है:

$(".news").hide();
$(".news").show();

तब आप आसानी से तत्व दिखा सकते हैं और छिपा सकते हैं।

Comments

समस्या है, .show()न तो हटाती है display: none, बल्कि तत्व पर निर्भर करती है display: blockया inlineडालती है, और यह लेआउट को तोड़ सकता है यदि तत्व एक असामान्य displayशैली का उपयोग करता है।

— लोलस्क

@ लॉलेस मुझे उस मुद्दे को ठीक करने के लिए एक सरल 'हैक' मिला। बस element{display:none;}अपने सीएसएस में उपयोग करें, लेकिन अपने जेएस में, element.hide()एक ही समय में भी उपयोग करें । यह show()फ़ंक्शन को काम करने की अनुमति देगा ।

— जरोद

Answer 3

तो, मैं आपको नमूना कोड देता हूं:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

लिंक क्लिक करने पर div दिखाने के लिए ट्रिगर होगा। तो आपका जावास्क्रिप्ट होगा:

$('.trigger').click(function() {
   $('.news').toggle();
});

JQuery को तत्वों को छिपाने और दिखाने के लिए स्टाइल को संभालने देने से आप लगभग हमेशा बेहतर होते हैं।

संपादित करें: मैं देखता हूं कि ऊपर के लोग उपयोग करने की सिफारिश कर रहे हैं.show.hide लिए और । .toggleआपको केवल एक प्रभाव के साथ दोनों करने की अनुमति देता है। तो यह अच्छा है।

Comments

toggleसमारोह दिखाने के लिए अच्छा विचार है । कई बार अगर आपको किसी चीज़ पर क्लिक करने और उसे दिखाने की ज़रूरत होती है, तो आप उसे छिपाना भी चाहेंगे।

— 1532 बजे user3267755

Answer 4

जावास्क्रिप्ट में:

getElementById("id").style.display = null;

JQuery में:

$("#id").css("display","");

Comments

मुझे $ ("# आईडी") का उपयोग करना पड़ा। css ('डिस्प्ले', ''); "प्रदर्शन" के लिए इनलाइन शैली को हटाने में इसे ठीक से काम करने के लिए

— ट्रिप्पिनबिल्ली

मुझे भी @TrippinBill (मैक फ़ायरफ़ॉक्स 43 का उपयोग करके) - एक संपादन प्रस्तुत किया है। यह सीएसएस संपत्ति को हटाने के बजाय इसे हटाने का एकमात्र तरीका प्रतीत होता है । यह इसे व्यापक सीएसएस असाइनमेंट द्वारा ओवरराइड करने की अनुमति देता है, जबकि इसे उलट देना नहीं है।

— क्रिस

Answer 5

दिखाने और छिपाने के लिए टॉगल का उपयोग करें।

$('#mydiv').toggle()

Http://jsfiddle.net/jNqTa/ पर कार्यशील उदाहरण देखें

Comments

ध्यान दें कि .toggle()jQuery 1.9 के बाद से हटा दिया गया है।

— टायलरएच

@TylerH मुझे यह देखने के लिए कोई नोट नहीं दिख रहा है कि यह पदावनत है?

— पॉल

@Paul क्षमा करें, मैं टॉगल इवेंट के बारे में सोच रहा था api.jquery.com/toggle-event

— TylerH

Answer 6

मैं तत्वों को प्रदर्शित / छिपाने के लिए एक वर्ग जोड़ने का सुझाव दूंगा:

.hide { display:none; }

और फिर तत्व को दिखाने / छिपाने के लिए jquery's .toggleClass () का उपयोग करें :

$(".news").toggleClass("hide");

Answer 7

इनलाइन "डिस्प्ले: कोई नहीं" को हटाने का एकमात्र तरीका jQuery के css-api के माध्यम से इसे खाली स्ट्रिंग के साथ रीसेट करके है (null यह btw काम नहीं करता है !!)।

JQuery के अनुसार यह एक बार इनलाइन शैली की संपत्ति को "हटाने" का सामान्य तरीका है।

$("#mydiv").css("display","");

या

$("#mydiv").css({display:""});

चाल ठीक से करना चाहिए।

IMHO एक ऐसा तरीका है जो jQuery में गायब है जिसे "अनहाइड" या "प्रकट" कहा जा सकता है जो केवल एक और इनलाइन शैली की संपत्ति सेट करने के बजाय प्रदर्शन मान को ठीक से बताता है जैसा कि ऊपर वर्णित है। या हो सकता है hide()कि प्रारंभिक इनलाइन मान को संग्रहीत करना चाहिए और show()इसे पुनर्स्थापित करना चाहिए ...

Answer 8

jQuery का -show () और .hide () फ़ंक्शन संभवतः आपका सबसे अच्छा दांव हैं।

Answer 9

आप हमें अधिक जानकारी नहीं दे रहे हैं लेकिन सामान्य तौर पर यह एक समाधान हो सकता है:

$("div.news").css("display", "block");

Comments

आपको किस अन्य इन्फोस की आवश्यकता है? मुझे लगता है कि यह एक आसान सवाल है, है ना? वैसे भी, मैं का उपयोग करके हल किया $(".news").show()और $(".news").hide();)

— अंक २०:११

एक आज्ञाकारी प्रश्न है: क्या पृष्ठ पर अधिक div.news हैं। किस स्थिति में यह उन सभी को प्रदर्शित करेगा।

— योरियन

Answer 10

किसी कारण के लिए, टॉगल ने मेरे लिए काम नहीं किया, और मुझे uncaught type error toggle is not a functionब्राउज़र में तत्व का निरीक्षण करते समय त्रुटि प्राप्त हुई । इसलिए मैंने निम्नलिखित कोड का उपयोग किया और यह मेरे लिए काम करने लगा।

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

उपयोग jquery स्क्रिप्ट फ़ाइल jquery-2.1.3.min.js।

Answer 11

यदि आपके पास बहुत सारे तत्व हैं जिन्हें आप करना चाहते हैं .hide()या .show(), आप बहुत सारे संसाधनों को बर्बाद करने जा रहे हैं जो आप चाहते हैं - भले ही उपयोग करें .hide(0)या .show(0)- 0 पैरामीटर एनीमेशन की अवधि है।

जैसा कि Prototyp.js .hide() और .show()विधियों के विपरीत है, जो केवल तत्व, jQuery के प्रदर्शन विशेषता में हेरफेर करने के लिए उपयोग किया जाता है का कार्यान्वयन अधिक जटिल है और बड़ी संख्या में तत्वों के लिए अनुशंसित नहीं है।

इस मामलों में आपको संभवतः .css('display','none')छिपाने और .css('display','')दिखाने की कोशिश करनी चाहिए

.css('display','block') से बचा जाना चाहिए, खासकर यदि आप इनलाइन तत्वों, टेबल रो (वास्तव में किसी भी टेबल तत्व) आदि के साथ काम कर रहे हैं।

Answer 12

सबसे अच्छा जवाब देने के लिए लोलक की टिप्पणी को ध्यान में रखते हुए आप प्रदर्शन गुणों के साथ तत्वों को दिखाने / छिपाने के लिए एक विशेषता या एक वर्ग जोड़ सकते हैं जो कि सामान्य रूप से भिन्न होता है, अगर आपकी साइट को पीछे की संगतता की आवश्यकता है, तो मैं एक वर्ग बनाने और इसे दिखाने के लिए जोड़ने / हटाने का सुझाव दूंगा। / तत्व प्रदर्शित करें

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

अपनी पसंद के प्रदर्शन पद्धति से इनलाइन-ब्लॉक को बदलें और jquerys addclass https://api.jquery.com/addclass/ का उपयोग करें और शो- हिडेन के बजाय, https://api.jquery.com/removeclass/ को हटा दें , यदि बैकवर्ड है। अनुकूलता कोई समस्या नहीं है आप इस तरह की विशेषताओं का उपयोग कर सकते हैं।

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

और तत्व को दिखाने और छिपाने के लिए jquerys attr () http://api.jquery.com/attr/ का उपयोग करें ।

जो भी विधि आप इसे पसंद करते हैं, वह आपको इस तरह से तत्वों को दिखा / छुपाते समय आसानी से css3 एनिमेशन को लागू करने में सक्षम बनाता है

Answer 13

का उपयोग कर के स्थान पर show()कहते हैं display:block, display:hideजो चीजों को तोड़ सकता है।

उससे बचने के लिए, आपके पास संपत्ति के साथ एक वर्ग हो सकता है display:noneऔर उस तत्व के लिए उस वर्ग को टॉगल कर सकता है toggleClass()।

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

किसी भी उत्तर ने इसका उल्लेख नहीं किया।