টুইটার বুটস্ট্র্যাপ সিএসএস ক্লাসের জন্য jQuery শো () লুকানো

Question

আমি টুইটার বুটস্ট্র্যাপ ব্যবহার করছি এবং আমি লক্ষ্য করেছি যে jQuery show()বা fadeIn()ক্লাসের সাথে চিহ্নিত ডিওএম উপাদান hiddenপ্রদর্শিত হবে না কারণ jQuery ফাংশনগুলি কেবল display: noneনির্দিষ্টকরণ সরিয়ে দেয় । তবে, visibilityএখনও সেট করা আছে hidden।

আমি অবাক হয়েছি এটিকে ঘিরে কাজ করার সর্বোত্তম উপায় কী?

1. hiddenউপাদানটির উপরের ক্লাসটি সরান
2. দৃশ্যমান সম্পত্তিটি পরিবর্তন করুন
3. আমার নিজের সিএসএসে লুকানো ক্লাসটি মুছে ফেলুন

বিশেষত, আমি জানতে চাই যে জিকুয়ারি বা সিএসএস দিয়ে এটি ঠিক করা আরও ভাল এবং কেন।

Comments

আমি সাধারণত {দৃশ্যমানতা: লুকানো use ব্যবহার করি না কারণ এটি স্থান গ্রহণের জন্য ডিওমে উপাদানটিকে ছেড়ে দেয়। আপনার এমন করার দরকারের কোনও কারণ আছে?

— ইশারউড

@ শিশুরউড visibility: hiddenবুটস্ট্র্যাপের প্রতিক্রিয়া থেকে এসেছে।

— লিম এইচ।

Answer 1

আপনি যে সিএসএস ক্লাসটি সন্ধান করছেন তা হ'ল .collapse। এটি উপাদানকে সেট করেdisplay: none;

সুতরাং ব্যবহার $('#myelement').show()সঠিকভাবে কাজ করবে।

আপডেট: বুটস্ট্র্যাপ v3.3.6 আপডেট হয়েছে। কল্যাপস এ ফিরে:

.collapse {
  display: none;
}

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এছাড়া সাথে কাজ করে .slideDown(), .fadeIn()ইত্যাদি .hiddenবুটস্ট্র্যাপ মধ্যে যে জিনিস নিয়ে আপনি প্রদর্শন করা হবে না চান জন্য।

— স্নম্পি

বুটস্ট্র্যাপ 3 এ এটি নতুন?

— লিম এইচ

না - আমি ডকুমেন্টেশনে এটি ব্যবহার করে দেখেছি। <ডি ক্লাস = "নাভ-পতন পতন"> এই লাইনটি v2.3.2 উদাহরণ থেকে নেওয়া হয়েছিল।

— ইওনিই

দুর্ভাগ্যক্রমে, এই উত্তরটি বুস্টারপ 3 এর সাথে আর কাজ করে না now .collapseএখন সেট করেvisibility: hidden;

— টম 17

আমার বুটস্ট্র্যাপ 3 এ কাজ করে?

— জেমস ম্যাককর্ম্যাক 16

Answer 2

এটি ক্লাসে আপনার অদৃশ্য উপাদানটিকে বিবর্ণ করবে এবং সরিয়ে দেবে

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

http://jsfiddle.net/7qxVL/

আপনার যদি অলক্ষ্যে উপাদানটির সত্যই প্রয়োজন না হয় (অর্থাত্ স্থানটি গ্রহণ করুন) যেহেতু আপনি পুনরায় সংজ্ঞা দিতে চান idden তবে (আপনার স্থানীয় সিএসএসে, আপনার স্থানীয় এলইএসএস ফাইলে বুটস্ট্র্যাপ উত্স বা আরও ভাল) পরিবর্তন করবেন না।

Comments

ধন্যবাদ আমার জন্য কাজ! আমি কেবলমাত্র :: fadeIn ()। সরানোর ক্লাস ('লুকানো') করতে সহজ করেছিলাম - সরাসরি সিএসএস চালাতে বা আড়াল করার দরকার নেই।

— dbrin

@ আইরিশ জোকার পোস্ট করেছেন উত্তর দেখুন। .hiddenজাভাস্ক্রিপ্ট ব্যবহার করে আপনি যে উপাদানগুলি প্রদর্শন করতে চান সেগুলি ব্যবহার করা উচিত নয় । .collapseপরিবর্তে ব্যবহার করুন।

— স্নম্পি

Answer 3

সতর্কতা:

বুটস্ট্র্যাপ ৩.৩.০ সবেমাত্র পরিবর্তিত হয়েছে। কলাপস এতে:

.collapse {
  display: none;
  visibility: hidden;
}

JQuery.show () এর জন্য যা একটি ব্রেকিং পরিবর্তন () আমাকে ইনলাইনে ফিরে যেতে হয়েছিল:

<div class="alert alert-danger" style="display:none;" >
</div>      

নীচে jQuery ব্যবহার চালিয়ে যেতে:

$('.alert').html("Change a few things up and try submitting again.").show()

কেবলমাত্র 'ডিসপ্লে: কিছুই নয়' প্রয়োগ করতে বুটস্ট্র্যাপ ৩.৩.০ এ আমি খুঁজে পেয়েছি class

.navbar {
  display: none;
}

Comments

বুটস্ট্র্যাপ এটি করার জন্য আমি কোনও ভাল কারণ দেখতে পাচ্ছি না। আমার ব্যক্তিগতভাবে সবসময় অন্য একটি সিএসএস ফাইল থাকে, যা 'ওভাররাইডিং' সিএসএস সেটিংসের জন্য ব্যবহৃত হয় - আমি কেবল ডিসপ্লে সেটিংসের জন্য .collapse প্রতিস্থাপন করেছি। এইভাবে, আপনি সমস্ত কিছু ভাঙ্গার বিষয়ে চিন্তা না করে এগিয়ে যেতে পারেন। বার্তায় ব্যথা :(

— Eoinii

বুটস্ট্র্যাপ 3.3.x মধ্যে সমাধান ব্যবহার করা .collapse('hide')এবং .collapse('show')পরিবর্তে jQuery এর মধ্যে পদ্ধতির। আপনি ক্লাসের মাধ্যমে collapse(লুকানোর জন্য) বা collapse in(দেখানোর জন্য) সরাসরি এইচটিএমএলে প্রাথমিক দৃশ্যমানতা সেট করতে পারেন । Getbootstrap.com/ javascript/#collapse দেখুন ।

— alexw

সর্বশেষতম সংস্করণ 3.3.6 এই পরিবর্তনটি ফিরিয়ে দিয়েছে

— ইওনিই

Answer 4

আমারও একই সমস্যা ছিল। আমি এই প্যাচটি ব্যবহার করেছি:

$(function() {
  $('.hidden').hide().removeClass('hidden');
});

তারপরে আমার আর একটি সমস্যা হয়েছিল, যেহেতু আমার অ্যাপ্লিকেশনটি নতুন উপাদান তৈরি করে এবং সেগুলি সংযোজন / সংশোধন করে। অবশেষে আমি যা করেছি তা হল আমার করা নতুন উপাদানটি তৈরি করার পরে:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');

Answer 5

আমার জন্য এটি ছিল কারণ বুটস্ট্র্যাপ !importantহ্যাক এবং ক্লাস উভয় শ্রেণীর জন্য ব্যবহার করছে ।

সুতরাং আপনি show()jquery সরবরাহ করা ইত্যাদি পদ্ধতি ব্যবহার করতে পারবেন না । পরিবর্তে আপনাকে আরও বেশি ভয়ঙ্কর কোডটি হ্যাকি কোড ওভাররাইট করে ওভাররাইট করতে হবে।

$('#myelement').attr('style', 'display: block !important');

গুরুত্বপূর্ণটি একটি শেষ অবলম্বন বিকল্প এবং বুটস্ট্র্যাপের মতো কোনও কোর লাইব্রেরিতে সত্যই ব্যবহার করা উচিত নয়।

Answer 6

এটি কাজ করে, তবে আমি প্রথম উত্তরটি চেষ্টা করে ক্লাসগুলিতে পরিবর্তন করব .collapse।

.toggleClass('hidden')