বুটস্ট্র্যাপ 3 শেভরন আইকনটির সাথে শো স্থিতি সঙ্কুচিত করুন


126

সঙ্কুচিত হওয়ার জন্য বুটস্ট্র্যাপ 3 জাভাস্ক্রিপ্ট উদাহরণ পৃষ্ঠা থেকে গৃহীত মূল উদাহরণটি ব্যবহার করে, শেভরন আইকনগুলি ব্যবহার করে আমি পতনের অবস্থাটি প্রদর্শন করতে সক্ষম হয়েছি।

আমার ব্যবহার করে এটি কাজ করছে:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

এটি কাজ করে (সমস্ত ব্রাউজারে পুরোপুরি পরীক্ষিত নয়) তবে আমি ভাবছি যে এর আরও দুর্দান্ত সমাধান আছে কিনা?

আদর্শভাবে আমি মূল ফাংশনটি ব্যবহার করতে চাই তবে আমি কীভাবে এটির সাথে একই ফলাফল অর্জন করতে পারি তা নিশ্চিত নই।

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

এখানে jsfiddle একটি কার্যকারী সংস্করণ ।


হাই, এই উদাহরণে, আমি কীভাবে পুরো শিরোনামটিকে কেবল পাঠ্যের পরিবর্তে হাইপারলিঙ্ক করব? অন্য কথায়, যখন আমি শিরোনাম প্যানেলে ক্লিক করি, কেবল পাঠ্যটিই না, আমি টগল প্রদর্শন করতে চাই। আমি কেমন করে ঐটি করি?
ব্যবহারকারী 1447718


@ user1447718 এখানে এক ঝাঁকুনি ঠিক তেমনটি করছে: জেএসফিডাল আমি পুরো শিরোনামটি ক্লিকযোগ্যও চেয়েছিলাম, তাই আমি এসও জুড়ে পাওয়া কয়েকটি সমাধান একত্রিত করেছি (এটি সহ)।
পাইটার ভিডিই 8

মরিচের মতো, আমি এটি করেছি
স্টিভ গ্রিন

উত্তর:


241

নিম্নলিখিত HTML এর জন্য ( বুটস্ট্র্যাপ 3 উদাহরণ থেকে ):

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

দৃশ্যমান প্রভাব:

অ্যাকর্ডিয়নে বুটস্ট্রা ৩ শেভরন আইকন


6
এটি ভালভাবে কাজ করে ... আপনার জন্য এখানে একটি জাসফিডাল রয়েছে: jsfiddle.net/CProma/3gYa3
ডেভিড

6
ভাঁড়ের মধ্যে, সমস্ত শেভরন প্রাথমিকভাবে নীচে নির্দেশ করে। এর জন্য কি কোনও সহজ ফিক্স আছে?
wuher

16
আমি প্রাথমিক অবস্থার জন্য খাঁটি সিএসএস সমাধান দেখতে পাচ্ছি না; এখানে সমস্যাটি হ'ল বুটস্ট্র্যাপ কমপক্ষে একটি ভেঙে ফেলা অবধি লিঙ্কটিতে "ধসে পড়া" শ্রেণিটি যুক্ত করে না (এমনকি তারা সবাই শুরুতে ভেঙে পড়লেও)। তারপরে এটি "খোলার" লিঙ্ক থেকে কেবল class শ্রেণিকে সরিয়ে দেয়। সুতরাং যেহেতু "ওপেন" এবং "ডিফল্ট" এর একই শ্রেণি রয়েছে তাই কোনও ভাল খাঁটি সিএসএস সমাধান নেই। আদর্শভাবে পার্থক্য করার জন্য একটি "খোলা" শ্রেণি যুক্ত করতে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট পরিবর্তন করে এটি ঠিক করা হবে would ততক্ষণ পর্যন্ত এটির সাথে থাকুন, বা অন্য কোনও উত্তর থেকে জেএস ব্যবহার করুন।
কার্ল বুসেমা

56
আমি জানি এটি একটি পুরানো পোস্ট, তবে কার্লের ইস্যুটির জবাব দিতে - আপনি যদি "অ্যাকর্ডিয়ান-টগল" সহ সমস্ত অ্যাঙ্কর ট্যাগগুলিতে "ধসে পড়া" শ্রেণিটি যুক্ত করেন, আপনার সমস্যাগুলি চলে যায় .... সুতরাং "অ্যাকর্ডিয়ান-টগল ভেঙে গেছে "। জ্যাকুয়ারি এর পরে ক্লাসগুলি যুক্ত করতে এবং মুছবে।
স্টেকপি

5
আমি এই উদাহরণটি পরিবর্তন করেছি যাতে পুরো শিরোনামটি ক্লিকযোগ্য হয়। একটি ছোটখাটো বাগ আমি লক্ষ্য করেছি যে স্লাইড খোলা / বন্ধ অ্যানিমেশনটি সম্পূর্ণ না হওয়া অবধি প্রতিটি প্যানেলের ডানদিকে ডানদিকে পাঠ্যটিকে "ধাক্কা" দেওয়া হবে। যদি কেউ এটি ঠিক করতে জানেন তবে দয়া করে এটি করুন। এই হিটলটি
পিটার ভিডিই

57

আপনি এই জাতীয় কোড ব্যবহার করতে পারেন:

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

=> জেএসফিডাল কাজ করছে


2
এটি অনেক ভাল উপায় জেসেক্স, ভাল সাথী। বুটস্ট্র্যাপ 3 চালু হওয়ার পরে এটিই আমি প্রথম পরিষ্কার সমাধান দেখেছি।
রায়ান স্কট

9
আপনি এছাড়াও ব্যবহার করতে পারেন$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
স্নিপার ওল্ফ

4
আপনি যদি শেষের পরিবর্তে ধসের শুরুতে $('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);
আপনি

এটি খুব ভাল কাজ করে। আমি কীভাবে দ্রুত আইকন টগল করব?
রাহেল এস

@ রাচেলস উইল পার্কারের পরামর্শটি এটিকে আরও দ্রুত করে তোলে।
ফিল জোলানস

22

সর্বাধিক উত্সাহের সাথে উত্তরটির উন্নতি করতে, আপনারা কেউ কেউ হয়ত পৃষ্ঠার প্রাথমিক লোডে লক্ষ্য করেছেন যে শেভরনরা একই দিক নির্দেশ করে। এটি সঙ্কুচিত লোড করতে চাইছেন এমন উপাদানগুলিতে "ধসে পড়া" শ্রেণি যুক্ত করে এটি সংশোধন করা হয়েছে।

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

এখানে একটি কার্যক্ষম ফিডল: http://jsfiddle.net/3gYa3/585/


10

বুলড্রিমের উত্তরের উন্নতি:

আপনি অবশ্যই ফন্টআউবাইজ ব্যবহার করতে পারেন!

"প্যানেল-শিরোনাম" শ্রেণীর পাশাপাশি "ধসে পড়া" অন্তর্ভুক্ত করার বিষয়টি নিশ্চিত করুন। আপনি প্যানেলে ক্লিক না করা পর্যন্ত "ধসে পড়া" শ্রেণিটি অন্তর্ভুক্ত করা হয়নি যাতে সঠিক শেভ্রন প্রদর্শনের জন্য আপনি "ধসে পড়া" শ্রেণিটি অন্তর্ভুক্ত করতে চান (যেমন, ভেঙে পড়লে শেভ্রন-ডান প্রদর্শিত হয় এবং খোলা অবস্থায় শেভ্রন-ডাউন হয়)।

এইচটিএমএল

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum...</p>
    </div>
</div>

সিএসএস

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}   

এছাড়াও, বিদ্যমান বর্গ ব্যবহার না করে নতুন শ্রেণি তৈরি করা ভাল অনুশীলন।

উদাহরণস্বরূপ কোডেপেন দেখুন: http://codepen.io/anon/pen/PPxOJX


এবং ফন্টউইউজ 4 সহ: এলিমেন্টের জন্য এফ-শেভরন-আপ এবং .collapsed .fa-chevron-up: {কন্টেন্টের আগে: "\ f077"; class ক্লাসের জন্য
ডেনিস চেনু

9

বিগগেটস এবং স্টেকপি ধন্যবাদ ড্রিমোনিক প্রশ্নের উত্তর হিসাবে, আমি সমস্ত শিরোনামকে ক্লিকযোগ্য করে তুলতে কিছু পরিবর্তন করেছি (কেবল শিরোনামের স্ট্রিং এবং গ্লুপস নয়) এবং লিঙ্ক থেকে আন্ডারলাইনটি বন্ধ করে দিয়েছি। আইকনগুলিকে একই লাইনে উপস্থিত হতে বাধ্য করার জন্য আমি সিএসএসের নির্দেশাবলীর শেষে h4 যুক্ত করেছি। পরিবর্তিত কোডটি এখানে:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <h4 class="panel-title">Collapsible Group Item #1</h4>
        </a>      
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <h4 class="panel-title">Collapsible Group Item #2</h4>
        </a>      
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <h4 class="panel-title">Collapsible Group Item #3</h4>
        </a>      
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

এবং পরিবর্তিত সিএসএস:

.panel-heading .accordion-toggle h4:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: right;        
    color: grey;        
    overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
a.accordion-toggle{
    text-decoration: none;
}

7

এখানে খাঁটি সিএসএস সহায়ক সহায়ক ক্লাস রয়েছে যা আপনাকে ঠিক আপনার এইচটিএমএলে যে কোনও ধরণের টগল সামগ্রী হ্যান্ডেল করতে দেয়।

এটি আপনার স্যুইচ করার যে কোনও উপাদানটির সাথে কাজ করে। আপনার লেআউট যাই হউক না কেন আপনি টগল উপাদানটির মধ্যে .if- ভেঙে পড়া এবং .if- নন-ধসে পড়া শ্রেণীর সাহায্যে কয়েকটি উপাদানগুলির মধ্যে রেখেছেন।

একমাত্র ক্যাচটি হ'ল আপনাকে নিশ্চিত করতে হবে যে আপনি টগলের কাঙ্ক্ষিত প্রাথমিক অবস্থাটি রেখেছেন। যদি এটি প্রাথমিকভাবে বন্ধ থাকে তবে টগলে একটি ধসে পড়া ক্লাস রাখুন।

এটির জন্যও দরকার : নির্বাচক নয় , এটি আইই 8 তে কাজ করে না।

এইচটিএমএল উদাহরণ:

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

কম সংস্করণ:

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

সিএসএস সংস্করণ:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

6

আমি জানি এটি পুরানো তবে এখন 2018 এর পরে, আমি ভেবেছিলাম যে কোডটি সরল করে এবং শেভরনকে ভেঙে পড়েছে বা না তার উপর ভিত্তি করে ব্যবহারকারীর অভিজ্ঞতা বাড়িয়ে আমি আরও ভাল করে জবাব দেব। আমি তবে ফন্টআউইজ ব্যবহার করছি। সিএসএস এখানে:

a[data-toggle="collapse"] .rotate {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

প্যানেল বিভাগের জন্য এইচটিএমএল এখানে রয়েছে:

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <i class="fa fa-chevron-right pull-right rotate"></i>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

প্যানেল শিরোনামের ডানদিকে শেভ্রনটিকে পুরোপুরি টানতে বুটস্ট্র্যাপগুলি টান-ডান ব্যবহার করি যা পুরো প্রশস্ত এবং প্রতিক্রিয়াশীল হওয়া উচিত। সিএসএস অ্যানিমেশনটির সমস্ত কাজ করে এবং প্যানেলটি ভেঙে পড়েছে কিনা তার ভিত্তিতে শেভ্রনকে ঘোরান। সহজ।


4

কাজ সহজ উদাহরণ

  • শরীরের অবস্থা দেখানো / লুকানো পেতে
  • তার পিতামাতার কাছে যেতে
  • আইকন সন্ধান করুন
  • প্রতীক পাল্টান

সহজ লিখুন

এইচটিএমএল :

<body>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">body content 1</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 2</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 3</div>
            </div>
        </div>
    </div>
</body>

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

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});

2

বা ... আপনি ঠিক এর মতো কিছু স্টাইল রাখতে পারেন।

.panel-title a.collapsed {
     background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
     background: url(../img/arrow_down.png) center right no-repeat;
}

http://codepen.io/anon/pen/GJjrQN


1

আমি দুর্দান্ত ফন্ট ব্যবহার করছি ! এবং একটি প্যানেল সঙ্কুচিত হতে চেয়েছিল

        <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>

                <div class="collapse in" id="collapseOrderItems">
                            ....
                </div>
        </div>

এবং সিএসএস

.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}

এখানে চিত্র বর্ণনা লিখুন

এখানে চিত্র বর্ণনা লিখুন


1

কৌনিকটি এখানে জাভাস্ক্রিপ্ট-ভিত্তিক পদ্ধতির সাথে সমস্যা সৃষ্টি করেছে বলে মনে হচ্ছে (কমপক্ষে আমি চেষ্টা করেছি)। আমি এই সমাধানটি এখানে পেয়েছি: http://www.codeproject.com/Articles/987311/ Collapsible-Responsive-Master-Child-Grid- Use-Ang । এর সংক্ষিপ্তসারটি হ'ল data-ng-clickটগল বোতামটি ব্যবহার করা এবং এটি ব্যবহার করে নিয়ামকের বোতামটি পরিবর্তন করার পদ্ধতি তৈরি করা$scope প্রসঙ্গটি ।

আমি অনুমান করি যে আমি আরও বিশদ সরবরাহ করতে পারব ... আমার বোতামগুলি ডিভটি ভেঙে যাওয়ার প্রাথমিক অবস্থার গ্লাইফিকনে সেট করা আছে (গ্লাইফিকন-শেভ্রন-ডান == ধসে ডিভ)।

page.html:

<div class="title-1">
    <button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
    ...
</div>

controllers.js:

.controller('PageController', function($scope, $rootScope) {
    $scope.collapse = function (event) {
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    };
)

1

এক রৈখিক.

i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }

এই উদাহরণে এটি সঙ্কুচিত টেবিল সারিগুলিকে গোষ্ঠী করতে ব্যবহৃত হচ্ছে। আপনার আইকনটিতে লক্ষ্য শ্রেণীর নাম (আমার-পতন-নাম) যুক্ত করা কেবলমাত্র আপনাকেই করতে হবে:

<tr data-toggle="collapse" data-target=".my-collapse-name">
    <th><i class="fa fa-chevron-right my-collapse-name"></span></th>
    <th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
    <td></td>
    <td>Detail Row - Content</td>
</tr>

আপনি বুটস্ট্র্যাপের নেটিভ ক্যারেট ক্লাস ব্যবহার করে <span class='caret my-collapse-name'></span>এবং এর মাধ্যমে এটি সম্পাদন করতে পারেনspan.caret.collapse.in { transform: rotate(90deg); }


0

আপনি যদি কেবল প্যানেলগুলির সাথে এটি ব্যবহার করার চেষ্টা করছেন (অ্যাকডিয়ন নয়), এই কোডটি চেষ্টা করে দেখুন:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
        </h4>
    </div>
    <div id="collapseExample" class="panel-collapse collapse in">
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

-3

আমি একটি খাঁটি এইচটিএমএল পন্থা চেয়েছিলাম যেহেতু আমি টেমপ্লেটের মাধ্যমে ফ্লাইতে যুক্ত হওয়া এইচটিএমএলকে ভেঙে বাড়াতে চেয়েছি! আমি এটি নিয়ে এসেছি ...

https://jsfiddle.net/3mguht2y/1/

var noJavascript = ":)";

যা কারও কাজে লাগতে পারে :)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.