হেডার ডিভিতে ক্লিক করার সময় কীভাবে একটি বুটস্ট্র্যাপ অ্যাকর্ডিয়নের পতন হয়?

Question

বুটস্ট্র্যাপ অ্যাকর্ডিয়নে, aপাঠ্যের উপরে ক্লিকের পরিবর্তে, panel-headingডিভি-তে যে কোনও জায়গায় ক্লিক করার সময় আমি এটি ধসে যেতে চাই ।

আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি তাই অ্যাকর্ডিয়ানের পরিবর্তে এটি কেবল একটি সঙ্কুচিত প্যানেল। পুরো প্যানেলটি ক্লিকযোগ্য কীভাবে করবেন তা সম্পর্কে কোনও ধারণা?

Comments

ভাল আপনি একটি উত্তর পেয়েছি। তবে, এই লিঙ্কটি আপনাকে বুটস্ট্র্যাপ অ্যাকর্ডিয়ান মেনু ডিজাইনারসিলিবি

— কারুপ্পিয়া আর কে

Answer 1

আপনার যা করতে হবে তা হ'ল ব্যবহার করা ...

• data-toggle="collapse"
• data-target="#ElementToExpandOnClick"

... যে উপাদানটিতে আপনি ক্লিক করতে চান তাতে পতন / প্রসারিত প্রভাবটি ট্রিগার করতে চান।

data-toggle="collapse"প্রভাবটি ট্রিগার করার উপাদান সহ উপাদানটি হবে। data-targetঅ্যাট্রিবিউট উপাদান যখন প্রভাব সূত্রপাত হয় প্রসারিত করবে নির্দেশ করে।

Youচ্ছিকভাবে আপনি সেট করতে data-parentপারেন যদি আপনি স্বাধীন সঙ্কুচিত না হয়ে একটি অ্যাকর্ডিয়ান প্রভাব তৈরি করতে চান, যেমন:

• data-parent="#accordion"

আমি নীচের সিএসএসগুলিকেও data-toggle="collapse"যদি <a>ট্যাগগুলি না করে থাকে তবে তা যুক্ত করব :

.panel-heading {
    cursor: pointer;
}

বুটস্ট্র্যাপ 3 ডকুমেন্টেশন থেকে সংশোধিত এইচটিএমএল সহ এখানে একটি জেএসফিডাল রয়েছে ।

Comments

এর মতো মনে হয় ডিফল্ট / ডেমো কোড হওয়া উচিত। <a> ব্যবহার করার চেয়ে অনেক সুন্দর।

— ডিবিএন

এই পদ্ধতি আইফোনের জন্য কাজ করে না। স্ট্যাকওভারফ্লো / প্রশ্নগুলির উত্তর অনুসারে / ১৯৮6617১1717২/২ আইফোনে সংযোগযোগ্য হওয়ার জন্য এটি <a> (যেহেতু এটি href প্রয়োজন) হওয়া দরকার ... কোনও ধারণা?

— মিনিভস্কি

@ মিনোভস্কি কীভাবে এই আপডেট হওয়া জেএসফিডাল সম্পর্কে: jsfiddle.net/Tcgyx/60 ? দুর্ভাগ্যক্রমে আমার কাছে পরীক্ষার জন্য আইফোন নেই। আমি যদি আমার উত্তরটি আপডেট করে থাকি তবে এটি কাজ করে।

— ভয়ানক

ফ্রিডলের জন্য @ জিগমের ধন্যবাদ! এটি সবসময় কাজ করে না, তবে আমাকে আরও পরীক্ষা-নিরীক্ষা করতে এবং আমি ব্যর্থতা নির্ভরযোগ্যতার সাথে উত্পাদন করতে পারি কিনা তা নির্ধারণ করতে দিন।

— মিনিভস্কি

@wutzebaer আপনার থাকতে পারে role="tab button"এবং ব্রাউজার তালিকার প্রথমটির এটি ব্যাখ্যা করে যা এটি বোঝে (সম্ভবত tab)। যদিও, আমি নিশ্চিত না যে দুজনের মধ্যে কোনটি ভাল। ভূমিকা tabএবং buttonভূমিকাগুলির অর্থ খুঁজে বের করার চেষ্টা করুন এবং এটি আপনাকে কোনটি বেছে নিতে হবে তার উত্তর দেবে।

— গুরুতর

Answer 2

আর একটি উপায় হ'ল আপনার <a>সমস্ত স্থান পূরণ করুন panel-heading। এটি করতে এই স্টাইলটি ব্যবহার করুন:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

এই ডেমোটি পরীক্ষা করুন ( http://jsfiddle.net/KbQyx/ )।

তারপরে আপনি শিরোনামটিতে ক্লিক করার পরে আপনি আসলে ক্লিক করতে পারেন <a>।

Comments

জি জিডব্লিউটি বুটস্ট্র্যাপ লাইব্রেরি ব্যবহার করে আমাদের জন্য তাদের দুর্দান্ত সমাধান।

— বরফ

আমি একই ধরণের সমাধান প্রয়োগ না করা পর্যন্ত এটি দেখিনি। সিএসএস পরিবর্তনগুলি আমার জন্য সর্বনিম্ন আক্রমণাত্মক পরিবর্তন ছিল। আমি প্রদর্শনটি বেছে নিয়েছি: ইনলাইন-ব্লক, প্রস্থ: 100% এবং যেহেতু আমরা আমাদের জন্য গ্লাইফিকন ব্যবহার করছি, একটি: এর আগে মার্জিন-বাম: -10 পিক্স এবং মার্জিন-ডান: 10px।

— কर्क লিমোহন

এই পদ্ধতিটি আইওএস ডিভাইসে কাজ করে না, যা বুটস্ট্র্যাপের সাথে কাজ করার সময় সাধারণত উদ্বেগের বিষয়।

— জারেড

জারেড, আপনি কি বিস্তারিত বলতে পারবেন? কেন এই কাজটি নির্দিষ্ট সাফারি সংস্করণে সীমাবদ্ধ নয়?

— ডাঃ জানু-ফিলিপ গেহর্ক্ক

এই পদ্ধতির সুবিধাটি হ'ল এটি অ্যাঙ্গুলারজেএস-এর জন্য বুস্ট্র্যাপ ইউআইয়ের জন্যও কাজ করে (যেখানে আপনি বুটস্ট্র্যাপের জেএস চান না)।

— ডাঃ জানু-ফিলিপ গেহর্ক্ক

Answer 3

আমি গ্রিমের জেসফিডেলে বেশ কয়েকটি ছোটখাটো ত্রুটি লক্ষ্য করেছি।

পুরো প্যানেলের জন্য কোনও হাতে পয়েন্টারটি পরিবর্তন করতে ব্যবহার করুন:

.panel-heading {
   cursor: pointer;
}

আমি <a>ট্যাগটি মুছে ফেলেছি (একটি স্টাইলের সমস্যা) এবং সর্বদা data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."চালু রেখেছি panel-heading।

আমি font-awesome.cssআমার jsfiddle ব্যবহার করে শেভ্রন প্রদর্শনের জন্য একটি সিএসএস পদ্ধতি যুক্ত করেছি :

http://jsfiddle.net/weaversnap/7FqsX/1/

Comments

এটি প্রায় কাজ করে। পৃষ্ঠাগুলি লোড হয়ে গেলে এবং প্যানেলগুলির মধ্যে একটিকে প্রসারণ ও সংক্রমণের পরে সেগুলি সংশোধন করার সময় শেভরনগুলি উল্টোদিকে উপস্থিত হয়।

— কনি ডেসিনকো

@ কননিডেসিঙ্কো উল্টে শেভরনগুলি ঠিক panel-headingকরার panel-heading collapsedজন্য পরিবর্তন করুন ।

— অ্যামি ব্যারেট

Answer 4

বুটস্ট্র্যাপ 4 এর জন্য এখানে একটি সমাধান রয়েছে। আপনার কেবল card-headerক্লাসটি aট্যাগে রাখতে হবে। এটি ডাব্লু 3 স্কুলগুলির একটি উদাহরণ থেকে পরিবর্তিত ।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>

Answer 5

সরল সমাধান হ'ল প্যাডিংগুলি থেকে মুছে ফেলা .panel-headingএবং যুক্ত করা .panel-title a।

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

এই সমাধানটি ক্যালফজু পোস্ট করা উপরেরটির মতো , কিছুটা আলাদা।

Answer 6

আসলে আমার প্যানেলে এই পতনের স্থিতির তীর আইকন ছিল এবং আমি এই পোস্টে অন্যান্য উত্তরগুলি চেষ্টা করেছি, তবে আইকনের অবস্থান পরিবর্তন হয়েছে, সুতরাং পতনের রাষ্ট্রের তীর আইকন সহ সমাধানটি এখানে ।

এই কাস্টম সিএসএস যুক্ত করুন

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

ক্রেডিট এই পোস্টের উত্তরদাতাদের যায় ।

আশা সাহায্য করে।

Answer 7

বুটস্ট্র্যাপ ৪.৩ এর কার্যকারী উদাহরণ এখানে

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>