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



jquery html (23)

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

এটি এড়ানোর জন্য, আমি ড্রপডাউন মেনুতে সহজেই একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারি এবং কেবল বিখ্যাত event.stopPropagation()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 বস্তুতে 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() স্বাভাবিক আচরণ এবং event.stopPropagation()event.stopPropagation() যোগ করা হয়।

হালনাগাদ

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


Answer #1

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

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

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

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<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>


Answer #2

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

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})

Answer #3

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

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});

Answer #4

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

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

Answer #5

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

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>

Answer #6

Angular2 বুটস্ট্র্যাপের সাহায্যে, আপনি বেশিরভাগ ক্ষেত্রেই অইন ইনপুট ব্যবহার করতে পারেন:

<div dropdown autoClose="nonInput">

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

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


Answer #7

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

                 | This event is fired immediately when the hide instance method 
hide.bs.dropdown | has been called. The toggling anchor element is available as the 
                 | relatedTarget property of the event.

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

$('#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;
    }
});

Answer #8

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/


Answer #9

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

এটি ডকুমেন্ট উপাদানতে প্রচার প্রতিরোধে এবং এটি কেবলমাত্র 'click.bs.dropdown.data-api' টাইপের ইভেন্টগুলির জন্য নির্বাচন করে যা নির্বাচকর '.dropdown .your-custom-class-for-keep-open-on-click-elements' মেলে '.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();
});

Answer #10

data-toggle="dropdown" ডেটা অ্যাট্রিবিউটটি সরানো এবং 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/


Answer #11

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

তাই আপনার কোড হয়

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>

Answer #12

আমার জন্য সবচেয়ে সহজ কাজ সমাধান হল:

  • ড্রপডাউন ক্লোজ না হওয়া উচিত এমন উপাদানগুলিতে keep-open ক্লাস যোগ করা
  • এবং কোড এই টুকরা বিশ্রাম না:
$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});

Answer #13

.dropdown.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
    }
});

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


Answer #14
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});

এই 2018 কাজ করে


Answer #15

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

$(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');
    }
});

Answer #16
$(function() {
var closeble = false;
$('body').on('click', function (e) {
    if (!$(event.target).is("a.dropdown-toggle")) {
        closeble = false;
    }

});
$('.dropdown').on({
    "click": function(event) {
        if ($(event.target).closest('.dropdown-toggle').length) {
            closeble = true;
        } else {
            closeble = false;
        }
    },
    "hide.bs.dropdown": function() {
        return closeble;
    }
});

});


Answer #17

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

$('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);
});

এখানে jsfiddle


Answer #18
$(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')
    });
});

Answer #19

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

$(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();`

Answer #20

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

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
});

এটি একটি অনুরূপ সমাধান খুঁজছেন যে কেউ সাহায্য করে।

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


Answer #21

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

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


Answer #22
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

এই কোনো শর্ত জন্য কাজ করতে পারে।


Answer #23

আমি সম্প্রতি অনুরূপ একটি সমস্যা পেয়েছি এবং ডেটা অ্যাট্রিবিউট data-toggle="dropdown" সরানোর সাথে এটি সমাধান করার বিভিন্ন উপায়ে চেষ্টা করেছি এবং event.stopPropagation() কলিংয়ের সাথে 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() })

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





drop-down-menu