টুইটার বুটস্ট্র্যাপ ড্রপডাউন কীভাবে গোপন করবেন

Question 1

এটি বিরক্তিকর হয়ে উঠছে - আমি যখন বুটস্ট্র্যাপ ড্রপডাউন-এর কোনও আইটেমে ক্লিক করি তখন ড্রপডাউনটি বন্ধ হয় না। আপনি যখন ড্রপডাউন আইটেমটি ক্লিক করেন তখন আমি একটি ফেসবক্স লাইটবক্স খুলতে সেট আপ করেছি তবে এতে সমস্যা আছে।

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

আমি যা চেষ্টা করেছি

আইটেমটি ক্লিক করা হলে, আমি এটি করার চেষ্টা করেছি:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

এটি এটি লুকিয়ে রাখে, কিন্তু তারপরে কোনও কারণে এটি আর খুলবে না।

আপনি দেখতে পাচ্ছেন যে বন্ধ করার জন্য আমার সত্যিই ড্রপডাউনটি প্রয়োজন, কারণ এটি উন্মুক্ত অবস্থায় কৃপণ লাগে (মূলত কারণ z-indexড্রপডাউনটি ফেসবক্স মডেল বক্স ওভারলেয়ের চেয়ে বেশি।

আমি কেন বুটস্ট্র্যাপের অন্তর্নির্মিত মডেল বাক্সটি ব্যবহার করছি না

আপনি যদি ভাবছেন যে আমি বুটস্ট্র্যাপে নির্মিত সুন্দর চেহারার মডেল বাক্সটি কেন ব্যবহার করছি না , কারণ এটি:

এটিতে এজ্যাক্স সহ সামগ্রী লোড করার কোনও উপায় নেই।
মডেলের জন্য আপনাকে প্রতিবার এইচটিএমএল টাইপ করতে হবে; ফেসবক্স দিয়ে আপনি একটি সহজ করতে পারেন:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
এটি অ্যানিমেটেড করতে CSS3 অ্যানিমেশনগুলি ব্যবহার করে (যা দেখতে খুব সুন্দর দেখাচ্ছে) তবে নন-সিএসএস 3 ব্রাউজারগুলিতে এটি কেবল প্রদর্শিত হয়, যা দেখতে খুব সুন্দর লাগে না; ফেসবক্সটি বিবর্ণ করতে জাভাস্ক্রিপ্ট ব্যবহার করে যাতে এটি সমস্ত ব্রাউজারে কাজ করে।

Question 2

এটা চেষ্টা কর:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

এটি আপনার পক্ষেও কাজ করতে পারে:

$('[data-toggle="dropdown"]').parent().removeClass('open');

Question 3

এখান থেকে বেশিরভাগ বিকল্পগুলি চেষ্টা করে দেখেছি তবে তাদের মধ্যে সত্যিকার অর্থে কেউই আমার পক্ষে কাজ করেনি। (এটি $('.dropdown.open').removeClass('open');এটি লুকিয়ে রেখেছিল, তবে অন্য কিছু ক্লিক করার আগে আপনি যদি শব্দটি না করে থাকেন তবে এটি আবার প্রদর্শিত হবে।

সুতরাং আমি এটি সহ শেষ করছি $("body").trigger("click")

Question 4

$('.open').removeClass('open');

বুটস্ট্র্যাপ 4 (অক্টোবর 2018):

$('.show').removeClass('show');

Question 5

আপনার কেবল $('.dropdown.open').removeClass('open');দ্বিতীয় লাইনের অপসারণ করা দরকার যা ড্রপডাউন মেনুটি লুকিয়ে রাখে।

Question 6

এটিই আমার পক্ষে কাজ করেছে:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Question 7

অ্যাঙ্কর ডেটা-টগল = "ড্রপডাউন" অ্যাঙ্কর ট্যাগে অ্যাঙ্কর দেখানো হিসাবে এটিকে জাভাস্ক্রিপ্ট কোড না লিখে এটি করা যেতে পারে :

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

স্নিপেট প্রসারিত করুন

Question 8

নির্বাচিত উত্তরটি আমার পক্ষে কার্যকর হয়নি তবে আমি ভাবছি এটি বুটস্ট্র্যাপের নতুন সংস্করণের কারণে। আমি এই লেখা শেষ:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

আশা করি এটি ভবিষ্যতে অন্য কারও জন্য সহায়ক।

Question 9

এটা চেষ্টা কর!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

বা

$(clicked_element).trigger("click");

এটি সর্বদা আমার জন্য কাজ করে।

Question 10

আমার পদ্ধতিটি কেন ব্যবহার করুন, কারণ যদি ব্যবহারকারীটি ডিভের বাইরে চলে যায় তবে এই মেটোড সাবমেনাসটি অদৃশ্য হওয়ার আগে ব্যবহারকারীকে একটি নির্দিষ্ট বিলম্বের অনুমতি দেয়। এটি ঠিক সুপারফিশ প্লাগইন ব্যবহার করার মতো।

1) প্রথমে হোভার ইন্টেন্ট জাভাস্ক্রিপ্ট ডাউনলোড করুন

এখানে লিঙ্ক: হোভার অভিপ্রায় জাভাস্ক্রিপ্ট

2) এখানে আমার কোড কার্যকর করতে হবে

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

Question 11

$('.dropdown.open').removeClass('open');

Question 12

ডকুমেন্টেশন পড়া এবং জাভাস্ক্রিপ্ট ব্যবহার করে এটি টগল পদ্ধতি ব্যবহার করে করা যেতে পারে:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

আপনি এটি সম্পর্কে এখানে পড়তে পারেন: http://getbootstrap.com/javascript/#DPdowns- ধারণা

Question 13

বুটস্ট্র্যাপ মডেল দিয়ে এইচটিএমএল খোলার চেষ্টা করুন, আমি এই কোডটি ব্যবহার করি:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
});

এবং লিঙ্কটি এরকম:

<a href="#my_page" data-toggle="modal">PAGE</a>

Question 14

কীভাবে বোতাম ড্রপডাউনটি বন্ধ করতে হবে এবং বোতামটি টগল করতে হবে সে সম্পর্কে আমার সমাধান এখানে:

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

যেখানে "এটি" বোতাম গ্রুপের একটি বৈশ্বিক ধারক।

Question 15

বুটস্ট্র্যাপ ৪.১:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

Question 16

এটি রেট্রোস্পেক্টে যুক্ত করা যেতে পারে (যদিও এটি বৈশিষ্ট্যটি ডকুমেন্টেড নয় , এমনকি বুটস্ট্র্যাপ ৪.৩.১ এও) তবে আপনি কেবল এটি প্যারামিটার দিয়ে কল করতে পারেন । এটিকে টগলকারী উপাদানটিতে কল করতে ভুলবেন না। তাই ভালো:hide

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

অবশ্যই এটি বিপরীতে কাজ করে show।

Question 17

এটি আমার পক্ষে কাজ করেছিল, আমার কাছে একটি নভবার এবং বেশ কয়েকটি পুলডাউন মেনু ছিল।

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

Question 18

এটি করার সবচেয়ে সহজ উপায় হ'ল: আপনি একটি আড়াল লেবেল যুক্ত করুন:

<label class="hide_dropdown" display='hide'></label>

তারপরে যতক্ষণ না আপনি ড্রপডাউনটি লুকিয়ে রাখতে চান, আপনি কল করুন:

$(".hide_dropdown").trigger('click');

Question 19

জানেন না এটি কারও সাহায্য করবে কিনা (সম্ভবত এটি আমার ক্ষেত্রে খুব নির্দিষ্ট, এবং এই প্রশ্নের সাথে নয়) তবে আমার জন্য এটি কাজ করেছে:

$('.input-group.open').removeClass('open');

Question 20

ক্লিক করার পরে:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Question 21

অ্যাঙ্কার ট্যাগে ক্লাস = "ড্রপডাউন-টগল" ব্যবহার করুন, তারপরে আপনি অ্যাঙ্কার ট্যাগটিতে ক্লিক করলে এটি বুটস্ট্র্যাপের ড্রপডাউনটি বন্ধ করে দেবে।

Question 22

আরে এই সহজ jQuery ট্রিক সাহায্য করা উচিত।

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

Question 23

সহজ উপায়:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

Question 24

আপনি আপনার বর্তমান ইভেন্ট হ্যান্ডলারে এই কোডটি ব্যবহার করতে পারেন

$('.in,.open').removeClass('in open');

আমার দৃশ্যে আমি যখন এজ্যাক্স কলটি সম্পূর্ণ করতাম

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

Question 25

বৈশিষ্ট্য দ্বারা নির্বাচন করা ধীর পথ। খোলা ড্রপডাউনটি লুকানোর জন্য এখানে সর্বাধিক দ্রুত সমাধান:

$(".dropdown-menu.show").parent().dropdown("toggle");

বা নিম্নলিখিত ব্যবহার করুন, যদি .ড্রপডাউন-মেনুটি পরবর্তী শিশুদের উপাদান না হয় (নিকটতম পিতামহীন ড্রপডাউন নিয়ন্ত্রণটি সন্ধান করুন):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");