টুইটার বুটস্ট্র্যাপ ব্যবহার করে কীভাবে উপাদানটি লুকানো যায় এবং jQuery ব্যবহার করে তা দেখানো যায়?

Question

ধরা যাক আমি এই জাতীয় একটি HTML উপাদান তৈরি করি,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

আমি কীভাবে jQuery / জাভাস্ক্রিপ্ট থেকে সেই HTML উপাদানটি প্রদর্শন করতে এবং আড়াল করতে পারি।

javascript:

$(function(){
  $("#my-div").show();
});

ফলাফল: (এর যে কোনও একটি সহ)।

আমি উপরের উপাদানগুলি লুকিয়ে রাখতে চাই।

বুটস্ট্র্যাপ ব্যবহার করে উপাদানটি আড়াল করার সহজ উপায় কী এবং এটি jQuery ব্যবহার করে দেখানো?

Comments

এই প্রশ্নটি প্রাসঙ্গিক রাখতে, আমি এটি উভয় বুটস্ট্র্যাপে কাজ করার জন্য সংশোধন করেছি, কারণ উত্তরটি কেবল শ্রেণীর নামের একটি পার্থক্য।

— ইভান ক্যারল

Answer 1

সঠিক উত্তর

বুটস্ট্র্যাপ 4.x

বুটস্ট্র্যাপ 4.x নতুন .d-noneক্লাস ব্যবহার করে । হয় না ব্যবহার করার পরিবর্তে , বা আপনি যদি বুটস্ট্র্যাপ 4.x ব্যবহার করেন । .hidden.hide.d-none

<div id="myId" class="d-none">Foobar</div>

• এটি দেখানোর জন্য: $("#myId").removeClass('d-none');
• এটি গোপন করার জন্য: $("#myId").addClass('d-none');
• এটি টগল করতে: $("#myId").toggleClass('d-none');

(ফ্যাংমিংয়ের মন্তব্যে ধন্যবাদ)

বুটস্ট্র্যাপ 3.x

প্রথম, ব্যবহার করবেন না .hide! ব্যবহার .hidden। অন্যরা .hideযেমন বলেছে, হ্রাস করা হয়েছে,

.hide উপলভ্য, তবে এটি সর্বদা পর্দার পাঠকদের প্রভাবিত করে না এবং v3.0.1 হিসাবে অবমাননিত

দ্বিতীয়ত, jQuery এর .toggleClass () , .addClass () এবং .removeClass () ব্যবহার করুন

<div id="myId" class="hidden">Foobar</div>

• এটি দেখানোর জন্য: $("#myId").removeClass('hidden');
• এটি গোপন করার জন্য: $("#myId").addClass('hidden');
• এটি টগল করতে: $("#myId").toggleClass('hidden');

সিএসএস ক্লাস ব্যবহার করবেন না .show, এতে খুব ছোট ব্যবহারের কেস রয়েছে। সংজ্ঞা show, hiddenএবং invisibleহয় ডক্স ।

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

Comments

আপনাকে অনেক ধন্যবাদ আমি সাধারণ উত্তরের জন্য দীর্ঘকাল ধরে এই জাতীয় কোনও কিছুর জন্য স্ট্যাকওভারফ্লো ভাবছিলাম। আপনাকে ধন্যবাদ

— অনুসন্ধান ফলাফল ওয়েব ফলাফল পাই

যেগুলির কী কী পদ্ধতি রয়েছে সে সম্পর্কে কারও ধারণা আছে: ((এবং) এর জন্য লুকান)?

— চেকলিস্ট

তারপরে আপনি এটিকে অ্যানিমেট করতে পারবেন না (যেমন। fadeIn()) সুতরাং collapseপরিবর্তে ক্লাস ব্যবহার করুন hidden। এবং তারপর অবশ্যই সেখানে ব্যবহার করার জন্য কোন প্রয়োজন নেই removeClass, addClassইত্যাদি

— TheStoryCoder

বুটস্ট্র্যাপ 4 এর জন্য আপনাকে ব্যবহার করতে হবে .hidden-xs-up। v4-alpha.getbootstrap.com/layout/responsive-utilities/... এছাড়াও রয়েছে hiddenHTML5 এর বৈশিষ্ট্য। v4-alpha.getbootstrap.com/content/reboot/…

— ক্লো

@ কঙ্গুর জিকিউরি .hide()বুটস্ট্র্যাপের .hideক্লাস নয়। JQuery পদ্ধতিটি দুর্দান্ত কাজ করে তবে এটি বুটস্ট্র্যাপের মতো নয় not বুটস্ট্র্যাপ লাইব্রেরিগুলি সেখানে নেই তা নির্ধারণের জন্য উপাদানটিতে লুকানো শ্রেণীর অন্তর্ভুক্তির উপর নির্ভর করে। jQuery এটি যোগ করে না - যদি আপনি এটি এখানে হ্যাক না করেন তবে: stackoverflow.com/a/27439371/124486 , এক্ষেত্রে আপনি অন্যান্য jQuery নির্দিষ্ট জিনিসগুলি ভেঙে ফেলতে পারেন।

— ইভান ক্যারল

Answer 2

কেবল:

$(function(){
  $("#my-div").removeClass('hide');
});

অথবা আপনি যদি কোনওভাবে ক্লাসটি এখনও সেখানে থাকতে চান:

$(function(){
  $("#my-div").css('display', 'block !important');
});

Comments

এখানে একটি jQuery প্লাগইন যা আপনাকে বুটস্ট্র্যাপ 'লুকানো' এবং 'গোপন' শ্রেণি সহ .show () এবং .hide () ব্যবহার করতে দেয়। gist.github.com/zimkies/8360181

— জিমকিজ

বুটস্ট্র্যাপ ডকুমেন্টেশন অনুসারে, .hide পাওয়া যায়, তবে এটি সর্বদা পর্দার পাঠকদের প্রভাবিত করে না এবং v3.0.1 হিসাবে অবমাননিত। কেবলমাত্র পরিবর্তে .hided বা .sr ব্যবহার করুন।

— বিজিলি

Answer 3

.গোপনের পরিবর্তে বুটস্ট্র্যাপ .কোলাপস ব্যবহার করুন

পরে JQuery এ আপনি এটি ব্যবহার করতে .show () বা। Hide () ব্যবহার করতে পারেন

Answer 4

এই সমাধানটি হ্রাস করা হয়। শীর্ষে ভোট দেওয়া সমাধানটি ব্যবহার করুন।

hideবর্গ বিষয়বস্তু পৃষ্ঠার লোড লুকানো রাখার দরকারী।

এটির আমার সমাধানটি প্রাথমিককরণের সময়, জ্যাকুরির আড়ালগুলিতে স্যুইচ করুন:

$('.targets').hide().removeClass('hide');

তারপরে show()এবং hide()স্বাভাবিক হিসাবে কাজ করা উচিত।

Comments

.ভিডিকে v3.0.1 হিসাবে অবহিত করা হয়েছে

— ইভান ক্যারল

ঠিক আছে, v3.0.1 হিসাবে লুকানো ব্যবহার করুন

— ডাস্টিন গ্রাহাম

এই ক্ষেত্রে, জেএসের সাথে গোপন করার আগে মাইক্রোসেকেন্ডগুলির জন্য প্রদর্শিত সামগ্রীর ফ্লিকার থাকতে পারে।

— সের্গেই রোমানভ

কল .hide () প্রথমে প্রদর্শন প্রয়োগ করে: কিছুই নয়; শৈলী ট্যাগ। হাইড ক্লাস অপসারণের আগে এটি ঘটে। আপনার যদি সেই ক্রমে থাকে তবে এটি ঝাঁকুনি দেওয়া উচিত নয়।

— ডাস্টিন গ্রাহাম

Answer 5

এই বিরক্তি মোকাবেলার আরেকটি উপায় হ'ল আপনার নিজস্ব সিএসএস বর্গ তৈরি করা যা নিয়মের শেষে গুরুত্বপূর্ণটিকে সেট করে না, এই জাতীয়:

.hideMe {
    display: none;
}

এবং এর মতো ব্যবহৃত:

<div id="header-mask" class="hideMe"></div>

এবং এখন jQuery গোপন কাজ করে

$('#header-mask').show();

Comments

এটি বুটস্ট্র্যাপের ক্লাস ব্যবহার করে উত্থিত সমস্যাটি সমাধান করে। কেন এই সংক্ষিপ্ত এবং সহজ সমাধানটিকে নিম্নচালিত করবেন?

— dbrin

কারণ এই সংক্ষিপ্ত এবং সহজ সমাধানটি সেই প্রশ্নের উত্তর দেয় না যা বিশেষত বুটস্ট্রা.পি 3 এর ক্লাস ব্যবহারের জন্য বলে। উল্লেখ করার মতো নয়, সহজ, বুটস্ট্র্যাপে লুকানো হিসাবে সংজ্ঞায়িত করা হয়েছে .hidden { display: none !important; visibility: hidden !important; }

— ইভান ক্যারল

এবং এটি হ'ল সমস্যা, JQuery হাইড এবং শো পদ্ধতিগুলি এই CSS এর সাথে ভালভাবে কাজ করে না।

— dbrin

Answer 6

@ ডাস্টিন-গ্রাহাম বর্ণিত পদ্ধতিটি হ'ল আমিও এটি কীভাবে করি। এও মনে রাখবেন যে বুটস্ট্র্যাপ 3 এখন getbootstrap এ তাদের ডকুমেন্টেশন অনুযায়ী "লুকানো" পরিবর্তে "লুকানো" ব্যবহার করে । সুতরাং আমি এই জাতীয় কিছু করব:

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

তারপরে যখনই jQuery show()এবং hide()পদ্ধতিগুলি ব্যবহার করবেন তখন কোনও বিরোধ নেই।

Comments

এত মার্জিত এবং সহজ - আপনি কেবল একটি সাধারণ বুটস্ট্র্যাপের ঘাটতি কাটিয়ে উঠলেন। আমি hiddenক্লাস ব্যবহার করতাম এবং তারপরে show()jQuery করার চেষ্টা করতাম এবং কিছুই হত না। আপনার সমাধান এটিকে এত সহজে সমাধান করে এবং আমি এটি ভেবে দেখিনি।

— ভলমিকে

Answer 7

এলিমেন্টটি এর সাথে সূচনা করুন:

<div id='foo' style="display: none"></div>

এবং তারপরে, আপনি যে ইভেন্টটি এটি দেখাতে চান তা ব্যবহার করুন:

$('#foo').show();

সবচেয়ে সহজ উপায় আমি বিশ্বাস করি।

Answer 8

এইচটিএমএল:

<div id="my-div" class="hide">Hello, TB3</div>

javascript:

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});

Answer 9

আমি টগলক্লাস ব্যবহার করতে চাই:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);

Comments

এটি দুর্দান্ত হবে তবে switchসম্পূর্ণরূপে এটির প্রয়োজন নেই।

— ইভান ক্যারল

Answer 10

$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// আপনি এমনকি সেট করতে হবে না #my-div .hideকিংবা !importantশুধু পেস্ট / ঘটনা ফাংশনে টগল পুনরাবৃত্তি।

Answer 11

2.3 থেকে 3.1 আপগ্রেড করার সময় সম্প্রতি এটির মধ্যে দৌড়ে; আমাদের jQuery অ্যানিমেশনগুলি ( স্লাইডডাউন ) ভেঙে গেছে কারণ আমরা পৃষ্ঠার টেমপ্লেটের উপাদানগুলিকে আড়াল করছিলাম । আমরা বুটস্ট্র্যাপ ক্লাসের নাম-ফাঁক করা সংস্করণ তৈরির পথে চলেছি যা এখন কুৎসিত ! গুরুত্বপূর্ণ নিয়ম বহন করে ।

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

Comments

3.1 সমর্থন করে না। লুকান, এটি লুকিয়ে আছে।

— ইভান ক্যারল

Answer 12

আপনি যা করেছেন তা আবার লিখতে রাজি হলে রাজ্জের উত্তর ভাল good

একই সমস্যায় পড়েছিলেন এবং নিম্নলিখিতগুলি নিয়ে এটি কার্যকর করেছিলেন:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery's methods: show and hide dynamically.
 * If the element was hidden by bootstrap's css class 'hide', remove it first.
 * Do similar in overriding the method 'hide'.
 */
!function($) {
    "use strict";

    var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
    $.fn.extend({
        show: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('hide')) {
                    $element.removeClass('hide');
                }
            });
            return oldShowHide.show.call(this);
        },
        hide: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('show')) {
                    $element.removeClass('show');
                }
            });
            return oldShowHide.hide.call(this);
        }
    });
}(window.jQuery);

বুটস্ট্র্যাপ যখন এই সমস্যার সমাধানের জন্য আসে তখন এটিকে ফেলে দিন।

Comments

এটা বর্গ যদি উপস্থিত থাকে সামনে আপনাকে কল চেক করতে প্রয়োজনীয় বা অনুকূল কি .removeClass()বা .addClass()?

— ইভান ক্যারল

এছাড়াও, .removeClass()ইতিমধ্যে সেট উপর কাজ করে না ? আপনি কেবল কল করতে পারেননি$(this).removeClass('show')

— ইভান ক্যারল

Answer 13

বুটস্ট্র্যাপ 4 এ আপনি d-noneকোনও উপাদান পুরোপুরি আড়াল করতে ক্লাস ব্যবহার করতে পারেন । https://getbootstrap.com/docs/4.0/utilities/display/

Answer 14

আপডেট : এখন থেকে, আমি ব্যবহার করি .collapseএবং $('.collapse').show()।

---

বুটস্ট্র্যাপ 4 আলফা 6 এর জন্য

বুটস্ট্র্যাপ 4 এর জন্য আপনাকে ব্যবহার করতে হবে .hidden-xs-up।

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

ভিউপোর্টটি প্রদত্ত ব্রেকআপপয়েন্ট বা আরও বিস্তৃত অবস্থায় যখন লুকানো - * - আপ ক্লাসগুলি উপাদানটি লুকিয়ে রাখে। উদাহরণস্বরূপ, .hmitted-md-up মাঝারি, বড় এবং অতিরিক্ত-বৃহত ভিউপোর্টে একটি উপাদান লুকায়।

রয়েছে hiddenHTML5 এর বৈশিষ্ট্য।

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

এইচটিএমএল [লুকানো] নামে একটি নতুন গ্লোবাল অ্যাট্রিবিউট যুক্ত করেছে, এটি প্রদর্শন হিসাবে স্টাইলযুক্ত: ডিফল্টরূপে কিছুই নয়। পিওরসিএসএসের কাছ থেকে ধারণা নিয়ে আমরা এই ডিফল্টটিকে [লুকানো] প্রদর্শন করে উন্নতি করি: গুরুত্বপূর্ণ নয়! display এর প্রদর্শনটি দুর্ঘটনাক্রমে ওভাররাইড হওয়া থেকে রক্ষা করতে সহায়তা করে। [লুকানো] যদিও মূলত আইই ১০ দ্বারা সমর্থিত নয়, তবে আমাদের সিএসএসে সুস্পষ্ট ঘোষণা সেই সমস্যাটি ঘিরে।

<input type="text" hidden>

.invisibleলেআউট প্রভাবিত করে যা এছাড়াও আছে ।

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

.Vvisible বর্গটি কেবলমাত্র কোনও উপাদানের দৃশ্যমানতা টগল করতে ব্যবহৃত হতে পারে যার অর্থ এর প্রদর্শনটি পরিবর্তন করা হয়নি এবং উপাদানটি নথির প্রবাহকে এখনও প্রভাবিত করতে পারে।

Answer 15

লুকানো এবং লুকানো উভয়ই হ্রাস করা হয় এবং পরে মুছে ফেলা হয়, নতুন সংস্করণগুলিতে আর বিদ্যমান নেই। আপনি আপনার প্রয়োজনের উপর নির্ভর করে ডি-নন / ডি-স্ম-নন / অদৃশ্য ইত্যাদি ক্লাস ব্যবহার করতে পারেন। তাদের মুছে ফেলার সম্ভাব্য কারণ হ'ল সিএসএস প্রসঙ্গে লুকানো / লুকানো কিছুটা বিভ্রান্তিকর। সিএসএসে, লুকানোর জন্য (লুকানো) প্রদর্শনের জন্য নয়, দৃশ্যমানতার জন্য ব্যবহৃত হয়। দৃশ্যমানতা এবং প্রদর্শন বিভিন্ন জিনিস।

আপনার যদি দৃশ্যমানতার জন্য শ্রেণি প্রয়োজন: লুকানো থাকে তবে আপনার দৃশ্যমানতা ইউটিলিটিগুলি থেকে অদৃশ্য শ্রেণি প্রয়োজন।

দৃশ্যমানতা এবং প্রদর্শন উভয় প্রয়োজনীয়তা নীচে পরীক্ষা করুন:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

Answer 16

বুটস্ট্র্যাপ 4 এর জন্য নিম্নলিখিত স্নিপেট ব্যবহার করুন, যা jQuery প্রসারিত:

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));

1. উপরের কোডটি একটি ফাইলে রাখুন। ধরা যাক "myJqExt.js"

2. JQuery অন্তর্ভুক্ত করার পরে ফাইলটি অন্তর্ভুক্ত করুন।

3. সিনট্যাক্স ব্যবহার করে এটি ব্যবহার করুন

   $ () HideShow ( 'আড়াল')।

   $ () HideShow ( 'প্রদর্শনী')।

আশা করি আপনি বলছি এটি সহায়ক হবে। :-)

Answer 17

বুটস্ট্র্যাপ, জিকিউরি, নেমস্পেসস ... একটি সাধারণের সাথে কী ভুল:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

আপনি একটু সহায়ক সহায়ক ফাংশন তৈরি করতে পারেন, অনুগত কেআইএসএস:

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state

Answer 18

উপরের উত্তরের উপর ভিত্তি করে, আমি কেবল আমার নিজস্ব ফাংশন যুক্ত করেছি এবং এটি .hide (), .show (), .toggle () এর মতো উপলভ্য jquery ফাংশনগুলির সাথে বিরোধ নয়। আশা করি এটা সাহায্য করবে.

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };

Answer 19

আমি বুটস্ট্র্যাপ সিএসএস ফাইল সম্পাদনা করে আমার সমস্যাটি সমাধান করেছি, তাদের ডকটি দেখুন:

.hide:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.আপনাকে এখন ব্যবহার করার জন্য ধারণা করা হচ্ছে তবে এটি আসলে:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

JQuery "fadeIn" "দৃশ্যমানতা" এর কারণে কাজ করবে না।

সুতরাং, সর্বশেষতম বুটস্ট্র্যাপের জন্য .hide আর ব্যবহারের জন্য নেই, তবে এটি এখনও min.css ফাইলে রয়েছে। সুতরাং আমি এএসকে ছেড়েছি এবং ".হাইড" শ্রেণি থেকে "! গুরুত্বপূর্ণ" সরিয়েছি (যা যাইহোক অবচয় বলে মনে করা হয়)। তবে আপনি এটি নিজের সিএসএসেও ওভাররাইড করতে পারেন, আমি আমার সমস্ত অ্যাপ্লিকেশনটি একই রকম কাজ করতে চেয়েছিলাম যাতে আমি বুটস্ট্র্যাপ সিএসএস ফাইলটি পরিবর্তন করেছিলাম।

এবং এখন jQuery "fadeIn ()" কাজ করে।

উপরের পরামর্শগুলি বনাম আমি এই কাজটি করার কারণটি হ'ল কারণ যখন আপনি "অপসারণক্লাস ('। আড়াল করুন')" অবিলম্বে বস্তুটি প্রদর্শিত হয় এবং আপনি অ্যানিমেশনটি এড়িয়ে যান :)

আমি আশা করি এটি অন্যকে সহায়তা করেছে।

Answer 20

Ighter সবচেয়ে শক্ত উত্তর

বুটস্ট্র্যাপ 4 এ আপনি উপাদানটি লুকান:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑 তারপরে, অবশ্যই, আপনি এটি আক্ষরিক সাথে এটি প্রদর্শন করতে পারেন:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

💓 তবে আপনি যদি বুটস্ট্র্যাপ থেকে jQuery এ দায়িত্ব স্থানান্তর করে শব্দার্থক উপায়ে এটি করেন তবে আপনি অন্যান্য jQuery চমত্কার জিনিসগুলি বিবর্ণের মতো ব্যবহার করতে পারেন:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

Answer 21

টুইটার বুটস্ট্র্যাপ টগলিং সামগ্রীগুলির জন্য ক্লাস সরবরাহ করে, https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less দেখুন ।

আমি jQuery এ সম্পূর্ণ নতুন, এবং সেগুলির ডকগুলি পড়ার পরে আমি টুইটার বুটস্ট্র্যাপ + jQuery একত্রিত করার জন্য আরও একটি সমাধান নিয়ে এসেছি।

প্রথমত, কোনও উপাদানকে (শ্রেণি উইসিস-টগল) ক্লিক করার সময় একটি উপাদানকে 'লুকান' এবং 'প্রদর্শন' করার সমাধানটি । টগল ব্যবহার করা হয় ।

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

আপনি ইতিমধ্যে .wsis-collapseটুইটার বুটস্ট্র্যাপ (ভি 3) বর্গ ব্যবহার করে উপাদানটি গোপন করেছেন .hidden:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

আপনি যখন ক্লিক করেন .wsis-toggle, jQuery একটি ইনলাইন শৈলী যুক্ত করছে:

display: block

কারণ !importantটুইটার বুটস্ট্র্যাপ, এই ইনলাইন শৈলী, কোনো প্রভাব নেই তাই আমরা সরানোর প্রয়োজন .hiddenবর্গ, কিন্তু আমি সুপারিশ করা হবে না .removeClassএই জন্য! কারণ যখন jQuery আবার কিছু গোপন করতে চলেছে তখন এটি একটি ইনলাইন শৈলী যুক্ত করে:

display: none

এটি টুইটার বুটস্ট্র্যাপের লুকানো শ্রেণীর মতো নয়, এটি এটি (স্ক্রিন পাঠক) এর জন্যও অনুকূলিত হয়েছে। সুতরাং, আমরা যদি লুকানো ডিভিটি দেখাতে চাই তবে আমাদের .hiddenটুইটার বুটস্ট্র্যাপের ক্লাস থেকে মুক্তি পাওয়া দরকার , তাই আমরা গুরুত্বপূর্ণ বিবৃতিগুলি থেকে মুক্তি পাই, তবে আমরা যদি আবার এটি আড়াল করি, আমরা .hiddenআবার ক্লাসটি ফিরে পেতে চাই ! আমরা এর জন্য [.toggleClass] [3] ব্যবহার করতে পারি।

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

এভাবে আপনি প্রতিবার লুকানো ক্লাস ব্যবহার করা চালিয়ে যান।

.showটিবি মধ্যে বর্গ আসলে jQuery এর এর ইনলাইন শৈলী হিসাবে একই, উভয় 'display: block'। তবে যদি .showক্লাসটি এক পর্যায়ে আলাদা হয় তবে আপনি কেবল এই ক্লাসটি যুক্ত করুন:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});

Comments

@ ইভানক্রোল, এটি জটিল কেন? আমি আপনার উত্তরটিও পড়ছি এবং আমি দেখতে পাচ্ছি আপনি টগলক্লাস ব্যবহার করার পরামর্শ দিচ্ছেন যা আমিও করি, তাই আপনার মন্তব্যটি আমি বুঝতে পারি না।

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