jQuery এবং CSS - প্রদর্শন সরান / যুক্ত করুন: কিছুই নয়

Question

এই শ্রেণীর সাথে আমার একটি ডিভ আছে:

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

এবং আমি কিছু jQuery পদ্ধতিগুলির সাথে প্রদর্শনটি সরাতে চাই: কোনটি নয়; (যাতে ডিভটি দেখানো হবে) এবং এটি আবার যুক্ত করার চেয়ে (তাই ডিভটি ছায়া নেবে)।

আমি এটা কিভাবে করবো? চিয়ার্স

Comments

jQuery $(".news").show()? "তাই ডিভটি ছায়া নেবে" ... আপনার মানে এটি ম্লান হয়ে যাবে ??

— JCOC611

হ্যাঁ $(".news").show()কাজ করে! একই $(".news").hide()!!! ধন্যবাদ;)

— মার্কজজ

আপনি $('.news').toggle();

— এটিকে

সম্ভাব্য সদৃশ কিভাবে jQuery ব্যবহার CSS প্রদর্শন কেউ অথবা অবরোধ সম্পত্তি পরিবর্তন করবেন?

— হেরেটিক বানর

Answer 1

লুকানোর জন্য div

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

অথবা

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

এবং দেখানোর জন্য div:

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

অথবা

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

Comments

$ ( '। খবর') CSS ( 'প্রদর্শন', 'ব্লক')। আমার জন্য কাজ! ধন্যবাদ শেহাল!

— জিতেশ সোজিত্রা

সিএসএসে প্রথমে যেটি সেট করা হয়েছিল এবং 'ব্লক' না করে আমি কীভাবে 'প্রদর্শন' শৈলীটি পুনরায় সেট করব?

— এডি 22

Answer 2

jQuery আপনাকে সরবরাহ করে:

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

তারপরে আপনি সহজেই উপাদানটি গুলি প্রদর্শন করতে এবং গোপন করতে পারবেন।

Comments

সমস্যাটি হ'ল .show()না অপসারণ display: none, পরিবর্তে উপাদানটির উপর নির্ভর করে display: blockবা inlineনির্ভর করে এবং যদি উপাদানটি কোনও অস্বাভাবিক displayশৈলী ব্যবহার করে তবে এটি বিন্যাসটি ভেঙে ফেলতে পারে ।

— lolesque

@ ললেস্কে আমি এই সমস্যাটি সমাধানের জন্য একটি সাধারণ 'হ্যাক' পেয়েছি। কেবল 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>

লিঙ্কটি ক্লিক করা হলে ডিভিটি দেখানোর ট্রিগার হবে। সুতরাং আপনার জাভাস্ক্রিপ্ট হবে:

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

উপাদানগুলি লুকিয়ে রাখতে ও প্রদর্শন করার জন্য jQuery কে স্টাইলিং পরিচালনা করতে দেওয়া প্রায় সবসময়ই আপনি ভাল।

সম্পাদনা: আমি দেখতে পাচ্ছি উপরের লোকেরা এটির জন্য .showএবং এর .hideজন্য সুপারিশ করছে । .toggleআপনাকে কেবল একটি প্রভাব দিয়ে উভয় করতে দেয়। সুতরাং এটি দুর্দান্ত।

Comments

toggleফাংশনটি দেখানোর জন্য ভাল ধারণা । অনেক সময় আপনার যদি কোনও কিছু ক্লিক করতে হয় এবং এটি প্রদর্শন করা দরকার হয় তবে আপনি এটি কার্যকারিতাও আড়াল করতে চান।

— ব্যবহারকারী 3267755

Answer 4

জাভাস্ক্রিপ্টে:

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

JQuery এ:

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

Comments

আমাকে $ ("# আইডি") ব্যবহার করতে হয়েছিল। সিএসএস ('প্রদর্শন', ''); "প্রদর্শন" এর জন্য ইনলাইন স্টাইলটি সরানোর ক্ষেত্রে এটি সঠিকভাবে কাজ করার জন্য

— ট্রিপিনবিলি

আমিও @ ট্রিপিনবিল (ম্যাক ফায়ারফক্স ৪৩ ব্যবহার করে) - একটি সম্পাদনা জমা দিয়েছি। সিএসএস সম্পত্তি এটির বিপরীত না করে অপসারণ করার একমাত্র উপায় বলে মনে হয় । এটি এটিকে বিস্তৃত সিএসএস অ্যাসাইনমেন্ট দ্বারা ওভাররাইড করার মঞ্জুরি দেয়, যেখানে এটি বিপরীত হয় না।

— ক্রিস

Answer 5

টগল প্রদর্শন এবং লুকানোর জন্য ব্যবহার করুন।

$('#mydiv').toggle()

Http://jsfiddle.net/jNqTa/ এ কাজের উদাহরণ পরীক্ষা করুন

Comments

নোট যে .toggle()jQuery 1.9 থেকে অবচয় করা হয়েছে।

— টাইলারএইচ

@ টাইলার এইচটি নষ্ট হয়ে গেছে তা দেখতে আমি কোনও নোট দেখতে পাচ্ছি না?

— পল

@ পল দুঃখিত, আমি টগল ইভেন্টের কথা ভাবছিলাম api.jquery.com/toggle-event

— টাইলার এইচ

Answer 6

আমি উপাদান প্রদর্শন / আড়াল করতে একটি শ্রেণি যুক্ত করার পরামর্শ দেব:

.hide { display:none; }

এবং তারপরে উপাদানটি প্রদর্শন / আড়াল করতে jquery এর .toggleClass () ব্যবহার করুন :

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

Answer 7

JQuery এর সিএসএস-এপি-র মাধ্যমে একটি ইনলাইন "ডিসপ্লে: কোনও কিছুই নয়" সরানোর একমাত্র উপায় হ'ল খালি স্ট্রিং দিয়ে এটি পুনরায় সেট করা ( nullবিটিডব্লিউ কাজ করে না !!)।

JQuery ডকুমেন্ট অনুসারে এটি একবার সেট করা ইনলাইন স্টাইলের সম্পত্তি "অপসারণ" করার সাধারণ উপায়।

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

অথবা

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

কৌশলটি সঠিকভাবে করা উচিত।

আইএমএইচও-তে jQuery-তে একটি অনুপস্থিত পদ্ধতি রয়েছে যা "আনহাইড" বা "প্রকাশ" নামে পরিচিত হতে পারে যা কেবলমাত্র অন্য কোনও ইনলাইন শৈলীর সম্পত্তি সেট করার পরিবর্তে উপরের বর্ণনার মতো প্রদর্শন মানটি সঠিকভাবে আনসেট করে। অথবা হতে hide()পারে প্রাথমিক ইনলাইন মান সংরক্ষণ করা show()উচিত এবং এটি পুনরুদ্ধার করা উচিত ...

Answer 8

jQuery এর .show () এবং .hide () ফাংশন সম্ভবত আপনার সেরা বাজি।

Answer 9

আপনি আমাদের খুব বেশি তথ্য দিচ্ছেন না তবে সাধারণভাবে এটি একটি সমাধান হতে পারে:

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

Comments

আপনার অন্য কোন ইনফোগুলি দরকার? আমি মনে করি এটি একটি সাধারণ প্রশ্ন, তাই না? যাইহোক, আমি $(".news").show()এবং $(".news").hide();) ব্যবহার করে সমাধান করেছি

— মার্কজজ

একটি উদ্বেগজনক প্রশ্ন: পৃষ্ঠায় আরও ডিভন.নিউজ আছে? এই ক্ষেত্রে এটি সমস্ত প্রদর্শন করবে।

— ইয়োরিয়ান

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 প্যারামিটার অ্যানিমেশন সময়কাল।

প্রোটোটাইপ.জেএস .hide() এবং .show()পদ্ধতিগুলির বিপরীতে যা কেবলমাত্র উপাদানটির প্রদর্শন বৈশিষ্ট্যটি কাজে লাগাতে ব্যবহৃত হয়েছিল, jQuery এর প্রয়োগ আরও জটিল এবং বিপুল সংখ্যক উপাদানগুলির জন্য প্রস্তাবিত নয়।

এই ক্ষেত্রে আপনার সম্ভবত .css('display','none')লুকানোর এবং .css('display','')দেখানোর চেষ্টা করা উচিত

.css('display','block') এড়ানো উচিত, বিশেষত যদি আপনি ইনলাইন উপাদান, টেবিল সারি (আসলে কোনও টেবিল উপাদান) ইত্যাদি নিয়ে কাজ করছেন working

Answer 12

সেরা উত্তরের জন্য লোলস্কের মন্তব্য বিবেচনা করে আপনি কোনও বৈশিষ্ট্য বা শ্রেণি যুক্ত করতে পারেন যা প্রদর্শন বৈশিষ্ট্যের সাথে উপাদানগুলি সাধারণত লুকানো থেকে আলাদা হয় / লুকিয়ে রাখতে পারেন, যদি আপনার সাইটের পিছনের সামঞ্জস্যের প্রয়োজন হয় তবে আমি একটি বর্গ তৈরি করার এবং এটি দেখানোর জন্য যুক্ত / অপসারণের পরামর্শ দেব / উপাদান প্রদর্শন

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

.news-hide {
display:none;
}

আপনার পছন্দের পছন্দসই প্রদর্শন পদ্ধতির সাথে ইনলাইন-ব্লক প্রতিস্থাপন করুন এবং jquerys অ্যাডক্লাস 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>

উত্তরের কোনটিই এর উল্লেখ করেনি।