ভিতরে ক্লিক করে ড্রপডাউন মেনুটি এড়িয়ে চলুন

310

আমার একটি টুইটার বুটস্ট্র্যাপ ড্রপডাউন মেনু রয়েছে। সমস্ত টুইটার বুটস্ট্র্যাপ ব্যবহারকারীরা জানেন, ড্রপডাউন মেনু ক্লিক ক্লিক করে বন্ধ হয় (এমনকি এটির ভিতরে ক্লিক করে)।

এটি এড়াতে, আমি সহজেই ড্রপডাউন মেনুতে একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারি এবং কেবল বিখ্যাতটি যুক্ত করতে পারি event.stopPropagation()।

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" 
             class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" 
             class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

তবে এটি সহজ এবং খুব সাধারণ আচরণ বলে মনে হচ্ছে এবং যেহেতু carousel-controls(পাশাপাশি পাশাপাশি carousel indicators) ইভেন্ট হ্যান্ডলারগুলি documentবস্তুকে অর্পণ করা হয়েছে , তাই clickএই উপাদানগুলির ( পূর্ব / পরবর্তী নিয়ন্ত্রণগুলি, ...) ইভেন্টটি "উপেক্ষা করা" হবে।

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

টুইটার বুটস্ট্র্যাপের ড্রপডাউন hide/ hiddenইভেন্টগুলিতে নির্ভর করা নিম্নলিখিত কারণগুলির জন্য সমাধান নয়:

  • উভয় ইভেন্ট হ্যান্ডলারের জন্য সরবরাহিত ইভেন্ট অবজেক্ট ক্লিক করা উপাদানটির জন্য রেফারেন্স দেয় না
  • ড্রপডাউন মেনু সামগ্রীতে আমার নিয়ন্ত্রণ নেই তাই কোনও flagশ্রেণি বা বৈশিষ্ট্য যুক্ত করা সম্ভব নয়

এই ফ্রিডালটি স্বাভাবিক আচরণ এবং এই ঝাঁকুনির সাথে রয়েছেevent.stopPropagation() যোগ করা হয়েছে।

হালনাগাদ

তার উত্তরের জন্য রোমানকে ধন্যবাদ । আমি একটি উত্তর পেয়েছি যা আপনি নীচে খুঁজে পেতে পারেন ।

javascript  jquery  html  twitter-bootstrap-3  drop-down-menu 
— পিএইচপি-দেব
সূত্র
1. আপনার jsfiddle কাজ করছে না। ২. আপনি ঠিক কী অর্জন করতে চান?
— paulalexandru
1
@ পোল্লেক্সান্দ্রু, আপডেট, দুটি ফিডাল যুক্ত করেছে। একটি ডিফল্ট আচরণ, এবং একটি পরিবর্তন সহ। পরবর্তী এবং পূর্ববর্তী বোতামে বা সূচকগুলিতে ক্লিক করার চেষ্টা করুন। প্রথম উদাহরণের জন্য, মেনুটি লুকিয়ে থাকে এবং ক্যারোসেল স্লাইডগুলি। বা দ্বিতীয় উদাহরণ: মেনুটি উন্মুক্ত থাকে, তবে কারাউসেলটি event propagationবন্ধ হওয়ার পরে স্লাইড হয়নি ।
— পিএইচপি-ডেভ
@ পল্লেক্সান্দ্রু বুঝেছেন, তাই না?
— php-dev
@ পিএইচপি-দেব: আমি চ্যালেঞ্জের জন্য আবার এটি আপডেট করেছি, এখন এটি নিখুঁত ... ডেমো দেখুন।
— লুকা ফিলোসোফি

উত্তর:

373

ডেটা অ্যাট্রিবিউট সরানো হচ্ছে data-toggle="dropdown" এবং ড্রপডাউন ওপেন / ক্লোজ বাস্তবায়ন একটি সমাধান হতে পারে।

প্রথমে লিপকে ক্লিক করে হ্যান্ডল করে এইভাবে ড্রপডাউনটি খুলতে / বন্ধ করতে:

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

এবং তারপরে ড্রপডাউনটির বাইরে ক্লিকগুলি এটিকে বন্ধ করার জন্য:

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

এখানে ডেমো রয়েছে: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

— রোমা
সূত্র
2
এই সমাধানটি ভাল কাজ করছে। অন্য কোনও উত্তর না থাকলে অনুগ্রহ আপনাকে প্রদান করা উচিত।
— php-dev
1
আপনার সমাধান কাজ করছে, জেনেরিক এবং এছাড়াও "জনপ্রিয়"। আপনার উত্তরে অনুগ্রহ করা উচিত। আমি একটি উত্তরও পেয়েছি, নীচে এটি দেখুন;)
— php-dev
1
@ সিচি ... এই জাতীয় প্রথম হ্যান্ডলারটি কেবল পরিবর্তন করুন ... $ ('li.DPdown.mega-dropdown a')। ('ক্লিক করুন', ফাংশন (ইভেন্ট) {$ ('লি.ড্রপডাউন.মেগা-ড্রপডাউন .open ') .Clamp (' ওপেন '); $ (এটি) .পিতা ()। toggleClass (' ওপেন ');});
— ডিসকেট
63
এই পছন্দসই উত্তর হ্যাক হয়। কি দারুন!!! মেগা-ড্রপডাউনটিতে অভ্যন্তরীণ ক্লিকগুলি রোধ করার জন্য এখানে একটি সহজ বুটস্ট্র্যাপ 4 আলফা উত্তর is // PREVENT INSIDE CLICK DROPDOWN $('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
— ফ্রাঙ্ক থোনি
7
e.stopPropagation()সবচেয়ে ভাল সমাধান।
— nacholibre
332

এটি পাশাপাশি সাহায্য করা উচিত

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});
— Arbejdsglæde
সূত্র
33
আমি মনে করি এই সমস্যাটির সর্বাধিক সহজ সমাধানটি নিশ্চিত। থাম্বস আপ - সবেমাত্র এটি পরীক্ষা করা হয়েছে এবং এটি কাজ করে!
— টর্স্টেন বার্থেল
13
এটি এখন পর্যন্ত সেরা সমাধান is
— নিরব
3
এটি সর্বাধিক সাধারণ সমাধান, তবে আমার আলাদা প্রয়োজন। দয়া করে আমার প্রশ্নটি মনোযোগ সহকারে পড়ুন :)
— php-dev
4
ক্লিকগুলিতে মেনুটি খালি রাখার জন্য সেরা সমাধান।
— ম্যাট পিয়ার্স
2
প্রকৃতপক্ষে সেরা সমাধান। আমি ব্যক্তিগতভাবে ব্যবহার '.dropdown-menu :not(.dropdown-item)'করেছি যাতে একটিতে ক্লিক করা dropdown-itemপপআপ বন্ধ করে দেয় তবে একটিতে ক্লিক করা যায় dropdown-headerনা।
— বেনিয়ামিন
41

বুটস্ট্র্যাপ নিম্নলিখিত ফাংশন সরবরাহ করে:

                 | এই ইভেন্টটি তত্ক্ষণাত্ লুকানো হয় যখন লুকানোর উদাহরণ পদ্ধতি
আড়াল.বিএস.ড্রপডাউন | বলা হয়েছে। টগলিং অ্যাঙ্কর উপাদানটি হিসাবে উপলব্ধ
                 | সম্পর্কিত ইভেন্টের সম্পত্তি সম্পত্তি।

অতএব, এই ফাংশনটি প্রয়োগ করে বন্ধ হওয়া থেকে ড্রপডাউনটি অক্ষম করতে সক্ষম হওয়া উচিত।

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});
— Vartan
সূত্র
2
@Vartan, এছাড়াও ঘটনা targetসম্পত্তি li.dropdown, relatedTargetহয় a.dropdown-toggle। সুতরাং আপনি hideইভেন্ট হ্যান্ডলারের মধ্যে ক্লিক করা উপাদানটির রেফার করতে পারবেন না ।
— php-dev
2
hasClass একটি ক্লাসের নাম নেয়, কোনও সিএসএস নির্বাচক নয়। target.hasClass(".keepopen")হওয়া উচিত target.hasClass("keepopen")। অন্যথায় কোড কাজ করবে না।
— হিউ গিনি
3
আমি ইন্টারনেট স্ক্যান করেছি এবং এটি এখন পর্যন্ত সবচেয়ে বুদ্ধিমান সমাধান, এই কারণেই ... এমসোট অন্যান্য পদ্ধতিগুলি এমন পদ্ধতির জন্য কল করে যা ডিফল্ট ইভেন্ট বন্ধ করা বা প্রচার বন্ধ করে ব্যবহার করে। এই পন্থাগুলি খুব খারাপ কারণ তারা ড্রপ ডাউনের মধ্যে অন্য কোনও ট্রিগারযুক্ত ইভেন্টগুলি ভেঙে ফেলবে (অর্থাত্ আমার জ্যাকুই মোবাইল ফর্ম উপাদানগুলি) এই পদ্ধতির সাহায্যে মেনু নিজেই বন্ধ হয়ে যাওয়ার সময় আপনাকে নির্দিষ্টভাবে সনাক্ত করতে দেয় এবং আপনাকে কেবল সেই ইভেন্টে পদক্ষেপ নিতে দেয়। এই উত্তরের জন্য অনেক তারার প্রয়োজন ....
— ওয়েবফিশ
3
@ ওয়েবেফিশ ইন্টারনেট স্ক্যান করতে আপনাকে কতটা লেগেছে? (rofl)
— php-dev
2
হতে পারে এটি কাজ করে .. তবে বুটস্ট্র্যাপ 4 সহ, e.target সর্বদা ড্রপডাউন হয়। ক্লিক করা লক্ষ্য নয়। আপনি ড্রপডাউনগুলির বাইরে ক্লিক করলেও, e.target এখনও ড্রপডাউন is সুতরাং আপনি এই ধরণের চেক করতে পারবেন না। কেউ কি এটিকে ঘিরে কোনও পথ দেখছেন?
— ফ্রেডআটার্স 21
36

পরম সর্বোত্তম উত্তর হ'ল ক্লাস ড্রপডাউন-মেনু পরে একটি ফর্ম ট্যাগ রাখা

সুতরাং আপনার কোড হয়

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>
— গ্রেগরি বোয়ার্স
সূত্র
2
কার্যত আমার জন্য দুর্দান্তভাবে কাজ করেছে, তবে স্টাইলটি ভেঙেছে
— 2778
2
এটি আমার জন্য দ্রুততম সমাধান ছিল
— জোনাথন
15
এটি সর্বোত্তম উত্তর নয় :) কোনও <li>উপাদান কোনও উপাদানের মধ্যে থাকা উচিত নয় <form> ।
— জিটা
2
এটি কোনও অর্থগতভাবে সঠিক সমাধান নয় - কোনও উল এর একমাত্র বৈধ সন্তান এলআই - যদি কিছু থাকে তবে ফর্মের ট্যাগগুলি লি ট্যাগগুলির মধ্যে থাকা উচিত - তবে এটি পছন্দসই পদক্ষেপটি অলস করতে পারে না - কোনওভাবেই কোনও উপায় <> ফর্ম> লি নয় সঠিক মার্কআপ
— গাভিগ্রিফ
2
এই দ্রুত সমাধানের জন্য ধন্যবাদ
— হারমান ডেমসং
27

আমি একটি সমাধানও খুঁজে পেয়েছি।

ধরে নিলাম যে Twitter Bootstrap Componentsসম্পর্কিত ইভেন্ট হ্যান্ডলারগুলি documentবস্তুটির জন্য ন্যস্ত করা হয়েছে , আমি সংযুক্ত হ্যান্ডলারগুলি লুপ করে দেখি যে বর্তমানের ক্লিক করা উপাদানটি (বা এর বাবা-মায়ের মধ্যে একটি) কোনও প্রতিনিধি ইভেন্ট দ্বারা উদ্বিগ্ন কিনা।

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); //Always stop propagation
});

আশা করি এটি যে কোনও একটি অনুরূপ সমাধান অনুসন্ধানে সহায়তা করবে।

আপনার সহায়তার জন্য সবাইকে ধন্যবাদ।

— পিএইচপি-দেব
সূত্র
1
কি দারুন!!! পুরোপুরি কাজ! এক সপ্তাহ ধরে সমস্যায় পড়েছিলাম, আমি এম কাস্টমস্ক্রোলবারটি ব্যবহার করছি এবং ড্রপ ডাউনে স্ক্রোলবারটি ক্লিক করার পরে এটি বন্ধ হয়ে যাচ্ছে, আপনার স্ক্রিপ্টটি কাজ করেছে এবং এখন এটি ঠিক আছে! অসংখ্য ধন্যবাদ.
— এয়ারনেইওস
দুর্দান্ত কাজ! কীভাবে এটি কীভাবে প্রসারিত হয়, যাতে কোনও ব্যবহারকারী ডিডি বন্ধ করতে কীবোর্ডে "ESC" (বা এমনকি বাইরে ক্লিক করতে পারেন) টিপতে পারেন?
— চাচা Iroh
2
@ ম্যাগগডডটকম ইএসসি কী প্রেসটি এখনও কাজ করা উচিত। বাইরে ক্লিক করার জন্য একই ...
— php-dev
এই সমাধানের একমাত্র ক্ষতিটি হ'ল এটি নেস্টেড ড্রপডাউনগুলিকে অনুমতি দেয় না (বলুন যে কোনও ড্রপডাউনের অভ্যন্তরে আপনার একটি ড্রপাইট রয়েছে)। এই মামলার কোন সমাধান আছে?
— sdvnksv ২
26

এটি সাহায্য করতে পারে: 

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})
— Bawantha
সূত্র
এটি যদি আপনি কোনও ব্যবহারকারী ড্রপডাউন (যেমন রেডিও বোতাম) -এ উপস্থিত কোনও ইউআই উপাদানটির সাথে ইন্টারঅ্যাক্ট করতে চান এবং বিকল্পগুলি টগল করার সময় মেনুটি বন্ধ না করতে চান তবে এটি অবশ্যই সবচেয়ে সহজ / সেরা উত্তর।
— রব
22 
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

এটি কোনও শর্তে কাজ করতে পারে।

— টেরি লিন
সূত্র
এটি সঠিক উত্তর হওয়া উচিত কারণ এটি নির্বাচিত উত্তরের চেয়ে কোডের কম লাইন ব্যবহার করে
— মুহাম্মদ ওমর আসলাম
নিবন্ধন করুন যেহেতু এটি আমার প্রয়োজনীয়তা পূরণ করে না
— php-dev
12

JQuery:

<script>
  $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
    e.stopPropagation();
  });
</script>

এইচটিএমএল:

<div class="dropdown keep-inside-clicks-open">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
     Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

ডেমো :

জেনেরিক: https://jsfiddle.net/kerryjohnson/omefq68b/1/

এই সমাধান সহ আপনার ডেমো: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

— কেরি জনসন
সূত্র
9

আমি এই সহজ জিনিসটি চেষ্টা করেছিলাম এবং এটি একটি কবজির মতো কাজ করে।

আমি পরিবর্তন ড্রপডাউন মেনুর থেকে উপাদান <div>থেকে <form>এবং এটি ভাল কাজ করেন।

<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
     </li>
     <li class="list-group-item"   >
     </li>
  </ul>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
      List Item 1
     </li>
     <li class="list-group-item"   >
         LI 2<input class="form-control" />
     </li>
     <li class="list-group-item"   >
        List Item 3
     </li>
  </ul>
</form>
স্নিপেট প্রসারিত করুন

— TheVigilant
সূত্র
2
ধন্যবাদ আপনি আমার সময় এবং অতিরিক্ত কোড সঞ্চয় করেছেন .... আপনাকে অনেক ধন্যবাদ
— জ্ঞানেশ_বি
6

আমি সম্প্রতি একটি অনুরূপ সমস্যা পেয়েছি এবং ডেটা অ্যাট্রিবিউট অপসারণ data-toggle="dropdown"এবং কলিংয়ের clickসাথে শোনার মাধ্যমে এটি সমাধানের বিভিন্ন উপায় চেষ্টা করেছি event.stopPropagation()।

দ্বিতীয় উপায়টি আরও ভাল দেখায়। এছাড়াও বুটস্ট্র্যাপ বিকাশকারীরা এভাবে ব্যবহার করেন। উত্স ফাইলে আমি ড্রপডাউন উপাদানগুলির সূচনা পেয়েছি:

// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);

সুতরাং, এই লাইন:

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

পরামর্শ দেয় আপনি ড্রপডাউন মেনুটি বন্ধ না করে formক্লাস সহ ধারকটির ভিতরে একটি উপাদান রাখতে পারেন .dropdown।

— ইলিয়া
সূত্র
6

<form>ড্রপডাউনগুলিতে ট্যাগগুলির জন্য তাদের সমর্থনে বুটস্ট্র্যাপ নিজেই এই সমস্যার সমাধান করেছে । তাদের সমাধানটি বেশ উপলব্ধিযোগ্য এবং আপনি এটি এখানে পড়তে পারেন: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/roddown.js

এটি নথির উপাদানটিতে প্রচার রোধ করতে এবং কেবল 'click.bs.dropdown.data-api'নির্বাচকের সাথে মেলে এমন ধরণের ইভেন্টগুলির জন্য এটি ফোটে '.dropdown .your-custom-class-for-keep-open-on-click-elements'।

অথবা কোডে

$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
    event.stopPropagation();
});
— ড্যানিয়েল শ্লাগ
সূত্র
1
ধন্যবাদ আপনাকে ধন্যবাদ উত্সের লিঙ্কটির জন্য আপনাকে ধন্যবাদ। উদাহরণস্বরূপের formদৃষ্টিভঙ্গি আপনার পক্ষে কেন কাজ করছে না তা ভেবে অন্যদের জন্য - আমি ক্লাসটি ব্যবহার করছিলাম dropleftতবে dropdownফর্ম-নির্বাচককে ম্যাচ করার জন্য এটির প্রয়োজনও রয়েছে।
— কে কে কোয়ান
6

বুটস্ট্র্যাপ ৪.৩ দিয়ে কাজ করার জন্য আমি @ ভার্টনের উত্তরটি পরিবর্তন করেছি। তার সমাধানটি সর্বশেষতম সংস্করণটির সাথে আর কাজ করবে না কারণ ক্লিক যেখানেই থাকুক না কেন targetসম্পত্তি সর্বদা ড্রপডাউনের মূলটি ফেরত দেয় div।

কোডটি এখানে:

$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
  if (!e.clickEvent) {
    // There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked. 
    // What we usually want to happen in such situations is to hide the dropdown so we let it hide. 
    return true;
  }

  var target = $(e.clickEvent.target);

  return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});
<div class="dropdown dropdown-keep-open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
— কনরাড কালেম্বা
সূত্র
2
2019 এর সেরা সমাধান বুটস্ট্র্যাপ ৪.১
— মাত্তেভ দিমিত্রি
$('.dropdown-keep-open').on('hide.bs.dropdown', ev => !(ev.clickEvent && $(ev.target).has(ev.clickEvent.target).length))
— অনলাইনলাইন
@ মাটভেদেমিট্রি আমি দুঃখিত, তবে কেউ নেই, কেউই এই একটি লাইনার পড়তে পারেন না। কোড লিখন এইভাবে একটি খারাপ অভ্যাস।
— ViRuSTriNiTy
শেষ লাইনটি ব্যবহার করে সরলীকরণ করা যেতে পারে return !target.closest('.dropdown-keep-open').length)। বলেছিল, এটি দুর্দান্ত সমাধান! এই সমস্যাটি সমাধান করার জন্য এটি প্রয়োজনীয় খুঁজে পেয়েছে।
— patrick3853
6 
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});
— waza123
সূত্র
প্রথমে, আপনার উত্তরের জন্য আপনাকে ধন্যবাদ। প্রশ্নের ইতিমধ্যে উত্তর দেওয়া হয়েছে। এছাড়াও, সাধারণ প্রয়োজনের তুলনায় প্রশ্নে বর্ণিত হিসাবে আমার আলাদা প্রয়োজন রয়েছে।
— পিএইচপি-ডেভ
4 
$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
    var $a  = $(e.target), is_a = $a.is('.is_a');
    if($a.hasClass('dropdown-toggle')){   
        $('ul.dropdown-menu', this).toggle(!is_a);
        $a.toggleClass('is_a', !is_a);
    }
}).on('mouseleave', function(){
    $('ul.dropdown-menu',this).hide();
    $('.is_a', this).removeClass('is_a');
});

সম্ভব হিসাবে স্মার্ট এবং কার্যকরী হতে আমি এটি আবার আপডেট করেছি updated আপনি যখন নেভের বাইরে ঘোরাফেরা করবেন তখন এটি বন্ধ হয়ে যাবে, আপনি যখন তার ভিতরে থাকবেন তখন খোলা থাকবে। নিখুঁত.

— লুকা ফিলোসোফি
সূত্র
আপনার সমাধানটি তার স্বল্পতার কারণে স্মার্ট, তবে ক্লাস যুক্ত করার পরে show, ড্রপডাউন বাইরের ক্লিকে বন্ধ হয় না, এবং আমাদের ড্রপডাউন-টগল ক্লিক করার আগে ... +1 যাইহোক
— পিএইচপি-দেব
আমি এটি আপডেট করেছি, ডেমোটি দেখুন। এটি সর্বোত্তম কারণ যা প্রতি সময় বডি ক্লিক ইভেন্টের বিরুদ্ধে পরীক্ষা না করা। এর বাইরে নয় প্রতিটি একক ন্যাভ উপাদানগুলির ভিতরে কেবল উপাদানকে প্রভাবিত করুন element
— লুকা ফিলোসোফি
আমার সমাধানটি bodyক্লিক ইভেন্ট on
— php-dev
হ্যাঁ, এটি বডি ক্লিক ইভেন্টের অংশে রিলে রয়েছে, এটি শরীরের প্রতিনিধি দলের জন্য কী উপাদানটি ক্লিক করা হয়েছে তা খতিয়ে দেখার চেষ্টা করে। $('body').on('click', function (e) {
— লুকা ফিলোসোফি
নাহ! এটা আমার উত্তর নয়। আমার উত্তরটি সর্বশেষ পোস্ট হয়েছে।
— পিএইচপি-ডেভ
4

উদাহরণস্বরূপ বুটস্ট্র্যাপ 4 আলফায় এই মেনু ইভেন্ট রয়েছে। কেন ব্যবহার করবেন না?

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});
— ফ্র্যাঙ্ক থোনি
সূত্র
1
e.preventDefault();লিঙ্কগুলি ব্লক করে, আপনি এড়িয়ে যেতে পারেন
— দীর্ঘ
আপনি ঠিক বলেছেন! e.preventDefault (); ইউআরএল অনুসরণ করা থেকে একটি লিঙ্ক প্রতিরোধ।
— ফ্রাঙ্ক থোনি
3

আপনি প্রচার থেকে ড্রপডাউন ক্লিক ক্লিক করতে পারেন এবং তারপরে carousel জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করে ম্যানুয়ালি carousel নিয়ন্ত্রণগুলি প্রতিস্থাপন করতে পারেন ।

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('a.left').click(function () {
    $('#carousel').carousel('prev');
});

$('a.right').click(function () {
    $('#carousel').carousel('next');
});

$('ol.carousel-indicators li').click(function (event) {
    var index = $(this).data("slide-to");
    $('#carousel').carousel(index);
});

এখানে জিসফিল ।

— নিল
সূত্র
আপনার উদাহরণটি ঠিকঠাক কাজ করে তবে সমস্যাটি হ'ল ড্রপডাউনটি কোনও সামগ্রী রাখতে পারে এবং কেবল চিত্র কারাউসেলকেই ধরে রাখতে পারে ...
— php-dev
3

অ্যাঙ্গুলার 2 বুটস্ট্র্যাপের সাহায্যে আপনি বেশিরভাগ পরিস্থিতিতে ননইনপুট ব্যবহার করতে পারেন:

<div dropdown autoClose="nonInput">

নন-ইনপুট - (ডিফল্ট) এর যে কোনও উপাদান ক্লিক করা হলে স্বয়ংক্রিয়ভাবে ড্রপডাউন বন্ধ করে দেয় - যতক্ষণ না ক্লিক করা উপাদান কোনও ইনপুট বা টেক্সেরিয়া না থাকে।

https://valor-software.com/ng2-bootstrap/#/dropdowns

— নীর সৌদরী
সূত্র
2

আমি জানি এই প্রশ্নটি বিশেষত jQuery এর জন্য ছিল, তবে যে কেউ AngularJS ব্যবহার করে যার এই সমস্যা রয়েছে আপনি এটি পরিচালনা করতে পারে এমন একটি নির্দেশিকা তৈরি করতে পারেন: 

angular.module('app').directive('dropdownPreventClose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(e) {
            e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
          });
        }
    };
});

তারপরে কেবল dropdown-prevent-closeআপনার উপাদানটিতে এমন বৈশিষ্ট্য যুক্ত করুন যা মেনুটি বন্ধ করতে ট্রিগার করছে এবং এটি এটির প্রতিরোধ করা উচিত। আমার জন্য, এটি এমন একটি selectউপাদান যা মেনুটি স্বয়ংক্রিয়ভাবে বন্ধ করে দিয়েছে:

<div class="dropdown-menu">
  <select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
    <option value="">Select Me</option>
  </select>
</div>
— jtate
সূত্র
6
<div class="dropdown-menu" ng-click="$event.stopPropagation()">1.2.x এ আমার জন্য কাজ করে
— dr3w
2

[বুটস্ট্র্যাপ 4 alpha 6] [পাগল] কারণ ডেভেলপার পাগল, e.stopPropagation()জন্য অবাঞ্ছিত আচরণ হতে হবে link_toসঙ্গে data-methodনা সমান getযেহেতু এটি ডিফল্ট রিটার্ন দ্বারা সব হিসাবে আপনার অনুরোধ করবে get।

এই সমস্যার প্রতিকারের জন্য, আমি এই সমাধানটি পরামর্শ দিচ্ছি, যা সর্বজনীন

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

কোড স্নিপেট দেখান

— জ্যাকি টং
সূত্র
2

কিছু জাভাস্ক্রিপ্ট বা jquery কোড লেখার পরিবর্তে (চাকা পুনরুদ্ধার)। উপরের দৃশ্যটি বুটস্ট্র্যাপ অটো-ক্লোজ বিকল্প দ্বারা পরিচালনা করা যেতে পারে। স্বয়ংক্রিয়ভাবে বন্ধ করার জন্য আপনি যে কোনও একটি মান সরবরাহ করতে পারেন :

  1. সর্বদা - (ডিফল্ট) এর যে কোনও উপাদান ক্লিক করা হলে স্বয়ংক্রিয়ভাবে ড্রপডাউনটি বন্ধ করে দেয়।

  2. বাইরের ক্লিক - ড্রপডাউনটির বাইরে ব্যবহারকারী যখন কোনও উপাদান ক্লিক করে তখনই স্বয়ংক্রিয়ভাবে ড্রপডাউনটি বন্ধ করে দেয়।

  3. অক্ষম - অটো বন্ধ করে দেয়

নিম্নলিখিত plunkr একবার দেখুন:

http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview

সেট

uib-dropdown auto-close="disabled"

আশাকরি এটা সাহায্য করবে :)

— ashwaniKumar
সূত্র
5
এটি স্পষ্টভাবে লক্ষ করা উচিত যে এটি কেবল ব্যবহারকারীদের জন্যই ভাল ui-bootstrap, যা সম্ভবত এই প্রশ্নটি দেখছেন এমন অনেকের ক্ষেত্রেই এটি নয়।
— কেভলার 18
আপনি ভাল বর্ণনা করেছেন তবে আমি মনে করি আপনার সমাধান হিসাবে লিখতে হবে uib-dropdown auto-close="outsideClick"। মেনুতে ক্লিকের ভিতরে ক্লিক করলে সামান্য অস্বস্তি হয় তবে বাইরের ক্লিকে মেনুটি খুব বিরক্তিকর।
— vusan
2

আমি জানি যে ইতিমধ্যে একটি পূর্ববর্তী উত্তর রয়েছে যা ফর্মটি ব্যবহারের পরামর্শ দিচ্ছে তবে প্রদত্ত মার্কআপ সঠিক / আদর্শ নয়। এখানে সবচেয়ে সহজ সমাধান, জাভাস্ক্রিপ্টের কোনও প্রয়োজন নেই এবং এটি আপনার ড্রপডাউনটি ভাঙ্গবে না। বুটস্ট্র্যাপ 4 নিয়ে কাজ করে।

<form class="dropdown-item"> <!-- Your elements go here --> </form>

— রাদু সিওবানু
সূত্র
@ রসদিকাসিম আমার কাছে এটি বুটস্ট্র্যাপ 4.0.০.০ সহ একটি ওয়েবসাইটে দুর্দান্ত কাজ করছে। 4.1 দিয়ে পরীক্ষা করা হয়নি
— রাদু সিওবানু
আসলে এটির মতো হওয়া উচিত: <ফর্ম ক্লাস = "ড্রপডাউন ড্রপডাউন-আইটেম">
— নাসের সাদরাই
2

এটি আমাকে সাহায্য করেছে,

$('.dropdown-menu').on('click', function (e) {
     if ($(this).parent().is(".open")) {
         var target = $(e.target);
         if (target.hasClass("keepopen") || target.parents(".keepopen").length){
                    return false; 
                }else{
                    return true;
                }
            }            
});

আপনার ড্রপ ডাউন মেনু উপাদানটি এর মতো হওয়া দরকার (ক্লাসগুলির নোট নিন dropdown-menuএবং keepopen।

<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">

উপরের কোডটি <body>ক্লাসের সাথে স্পিফিক উপাদানগুলির পরিবর্তে পুরোটিতে বিডিং প্রতিরোধ করেdropdown-menu ।

আশা করি এটি কাউকে সাহায্য করবে।

ধন্যবাদ।

— অঞ্জনা সিলভা
সূত্র
বুটস্ট্র্যাপ 4 Per হিসাবে আপডেট হয়েছে (।। 'ড্রপডাউন-মেনু [ডেটা-হ্যান্ডলেড্রোডাউনক্লোজ = "সত্য"]')। ('ক্লিক করুন', ফাংশন (ঙ) {যদি ($ (এটি)। পিতাম ()। (" .শো ")) {var টার্গেট = $ (e.target); রিটার্ন (টার্গেট.হাসক্লাস (" ক্লোজড্রপডাউন ") || টার্গেট.প্যারেন্টস ("। ক্লোজড্রপডাউন ") দৈর্ঘ্য);}});
— থুলসিরাম
1

আমার পক্ষে সবচেয়ে সহজ কাজটি সমাধান:

  • যোগ keep-open উপাদান বর্গ ড্রপডাউন বন্ধের কারণ হবে না উচিত যে
  • এবং কোডের এই অংশটি বাকীটি করে:
$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});
— ঘি-মৌমাছি
সূত্র
আপনি কি দয়া করে আমাকে এই স্ট্যাকওভারফ্লো.com/ জিজ্ঞাসাগুলি / 551552712/… ঠিক করতে সহায়তা করতে পারেন @ জি-বি
— ঝু
1

আমি ডিফল্ট বুটস্ট্র্যাপ ন্যাভ ব্যবহার করতে চাইলে সমাধানগুলির কোনওটিই আমি খুঁজে পাইনি। এই সমস্যার সমাধানটি এখানে দেওয়া হল:

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });
— মাইক
সূত্র
1

ইন .dropdownবিষয়বস্তু করা .keep-openতাই মত কোন লেবেলের উপর শ্রেণী:

$('.dropdown').on('click', function (e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    if (target.hasClass('keep-open')) {
        $(dropdown).addClass('keep-open');
    } else {
        $(dropdown).removeClass('keep-open');
    }
});

$(document).on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if ($(target).is('.keep-open')) {
        return false
    }
});

পূর্ববর্তী কেসগুলি ধারকগুলির সাথে সম্পর্কিত ঘটনাগুলি এড়ায়, এখন ধারকটি ক্লাস উত্তরাধিকার সূত্রে উত্তোলন করে এবং বন্ধ হওয়ার আগে পরীক্ষা করে।

— ডিক্সন স্যান্টিস্টেবান ফেরিয়া
সূত্র
1

আমি এটি দিয়ে এটি করেছি:

$(element).on({
    'mouseenter': function(event) {
        $(event.currentTarget).data('mouseover', true);
    },
    'mouseleave': function(event) {
        $(event.currentTarget).data('mouseover', false);
    },
    'hide.bs.dropdown': function (event) {
        return !$(event.currentTarget).data('mouseover');
    }
});
— উইলিয়াম
সূত্র
0 
$(function() {
    $('.mega-dropdown').on('hide.bs.dropdown', function(e) {
        var $target = $(e.target);
        return !($target.hasClass("keep-open") || $target.parents(".keep-open").size() > 0);
    });

    $('.mega-dropdown > ul.dropdown-menu').on('mouseenter', function() {
        $(this).parent('li').addClass('keep-open')
    }).on('mouseleave', function() {
        $(this).parent('li').removeClass('keep-open')
    });
});
— এসএনসি
সূত্র
0

ড্রপডাউনটি বন্ধ করার জন্য যদি বুটস্ট্র্যাপ ড্রপডাউনটির বাইরে কোনও ক্লিক ইভেন্ট ট্রিগার করা হয়, তবে এটিই আমার পক্ষে কাজ করেছে:

জেএস ফাইল:

    $('.createNewElement').on('click.bs.dropdown.data-api', '.tags-btn-group.keep-open-dropdown', function (e) {
        var target = $(e.target);
        if (target.hasClass("dropdown-menu") || target.parents(".dropdown-menu").length) {
            e.stopPropagation();
        }
    });

এইচটিএমএল ফাইল:

<!-- button: -->
<div class="createNewElement">
                <div class="btn-group tags-btn-group keep-open-dropdown">

                    <div class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">OPEN DROPDOWN</div>

                    <ul class="dropdown-menu">
                        WHAT EVER YOU WANT HERE...
                    </ul>

                </div>
</div>
— Dudi
সূত্র
0

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

$(function() {
    $('.dropdown').on("click", function (e) {
            $('.keep-open').removeClass("show");
    });
    $('.dropdown-toggle').on("click", function () {
            $('.keep-open').addClass("show");
    });

    $( ".closeDropdown" ).click(function() {
        $('.dropdown').closeDropdown();
    });
});
jQuery.fn.extend({
    closeDropdown: function() {
        this.addClass('show')
            .removeClass("keep-open")
            .click()
            .addClass("keep-open");
    }
  });

এইচটিএমএলে:

<div class="dropdown keep-open" id="search-menu" >
    <button  class="btn dropdown-toggle btn  btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-filter fa-fw"></i> 
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item" id="opt1" type="button">Option 1</button>
        <button class="dropdown-item" id="opt2" type="button">Option 2</button>
        <button type="button" class="btn btn-primary closeDropdown">Close</button>
    </div>
</div>

আপনি যদি ড্রপড্রাউনটি বন্ধ করতে চান:

`$('#search-menu').closeDropdown();`
— Hchab
সূত্র
0

বুটস্ট্র্যাপ 4 এ আপনি এটিও করতে পারেন:

$('#dd-link').on('hide.bs.dropdown', onListHide)

function onListHide(e)
{
  if(e.clickEvent && $.contains(e.relatedTarget.parentNode, e.clickEvent.target)) {
  e.preventDefault()
  }
}

যেখানে #dd-linkঅ্যাঙ্কর উপাদান বা বোতামটিতে data-toggle="drowndown"সম্পত্তি রয়েছে has

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