Jquery এ বন্ধ করতে বাইরের মেনুতে ক্লিক করুন

Question

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

তবে এখন আমাকে ডকুমেন্টের যে কোনও জায়গায় ব্যবহারকারী ক্লিক না করা পর্যন্ত এটি স্থানে থাকতে বলা হচ্ছে। এই কিভাবে এটি করা সম্ভব?

এটি এখন আমার যা আছে তার একটি সরল সংস্করণ:

$(document).ready(function() {
  $("ul.opMenu li").click(function(){
   $('#MainOptSubMenu',this).css('visibility', 'visible');
  });

  $("ul.opMenu li").mouseleave(function(){
      $('#MainOptSubMenu',this).css('visibility', 'hidden');
  });
});



<ul  class="opMenu">
  <li id="footwo" class="">
    <span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>
      <ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">
        <li>some</li>
       <li>nav</li>
       <li>links</li>
       </ul>
    </li>
</ul> 

আমি এই $('document[id!=MainOptSubMenu]').click(function()ভেবে এমন কিছু চেষ্টা করেছিলাম যা মেনুটি নষ্ট না করে এমন কোনও কিছুকে ট্রিগার করবে তবে এটি কার্যকর হয়নি।

Comments

আমার এখানে উত্তর আছে। > http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/43405204#43405204

— ড্যান ফিলিপ

সম্ভাব্য সদৃশ সদৃশ কিভাবে আমি একটি উপাদান বাইরে একটি ক্লিক সনাক্ত করতে পারি?

— ড্যান ফিলিপ 12

Answer 1

এই প্রশ্নের ব্যবহৃত পদ্ধতির দিকে একবার নজর দিন:

আমি কীভাবে কোনও উপাদানটির বাইরে ক্লিক করতে পারি?

উইন্ডোটি বন্ধ করে দেওয়া ডকুমেন্টের বডিতে একটি ক্লিক ইভেন্ট সংযুক্ত করুন। উইন্ডোতে একটি পৃথক ক্লিক ইভেন্ট সংযুক্ত করুন যা ডকুমেন্টের শরীরে প্রচার বন্ধ করে।

$('html').click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

Comments

এটি খুব বিউটিফুল তবে আপনার $ ('এইচটিএমএল') ব্যবহার করা উচিত click ক্লিক করুন () বডি নয়। শরীরের সর্বদা তার সামগ্রীর উচ্চতা থাকে। এটিতে প্রচুর পরিমাণে সামগ্রী নেই বা স্ক্রিনটি খুব বেশি, এটি কেবল দেহের দ্বারা ভরা অংশে কাজ করে। : কপি থেকে stackoverflow.com/questions/152975/... - Meo ফেব্রুয়ারী 25 '11 এ 15:35

— NickGreen

দুর্দান্ত সমাধান কেন এটি ক্লিক করুন () ক্লিক করুন এবং) লাইভের সাথে নয় ('ক্লিক', ফানক ...?

— হাট

এই পদ্ধতির সাথে একমাত্র সমস্যা হ'ল যে বস্তুগুলির মধ্যে ইতিমধ্যে একটি ক্লিক শ্রোতা রয়েছে যা অন্যান্য কারণে স্টপপ্রোগেশনটির কোনও প্রভাব নেই। আমি বুঝতে পারি কেন এটি এমন, তবে এটি এখনও এই সমাধানের একটি সীমাবদ্ধতা।

— ড্যানএইচ

Answer 2

উত্তরটি সঠিক, তবে এটি এমন শ্রোতা যুক্ত করবে যা আপনার পৃষ্ঠায় প্রতিবার ক্লিক হওয়ার সাথে সাথে ট্রিগার হবে। এটি এড়ানোর জন্য, আপনি শ্রোতাকে কেবল একবারের জন্য যুক্ত করতে পারেন:

$('a#menu-link').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();

    $('#menu').toggleClass('open');

    $(document).one('click', function closeMenu (e){
        if($('#menu').has(e.target).length === 0){
            $('#menu').removeClass('open');
        } else {
            $(document).one('click', closeMenu);
        }
    });
});

সম্পাদনা করুন: আপনি যদি stopPropagation()প্রাথমিক বোতামটি এড়াতে চান তবে আপনি এটি ব্যবহার করতে পারেন

var $menu = $('#menu');

$('a#menu-link').on('click', function(e) {
    e.preventDefault();

    if (!$menu.hasClass('active')) {
        $menu.addClass('active');

        $(document).one('click', function closeTooltip(e) {
            if ($menu.has(e.target).length === 0 && $('a#menu-link').has(e.target).length === 0) {
                $menu.removeClass('active');
            } else if ($menu.hasClass('active')) {
                $(document).one('click', closeTooltip);
            }
        });
    } else {
        $menu.removeClass('active');
    }
});

Comments

আমি কোডটি এর মতো দেখতে পাচ্ছি, প্রতি বার মেনু লিঙ্কটি ক্লিক করা হলে এটি নথিতে কোনও নতুন ক্লিক ফাংশন যুক্ত করবে না? সুতরাং আপনি যদি পৃষ্ঠাটি রিফ্রেশ না করে 1000 বার মেনু লিঙ্কটি ক্লিক করেন তবে আপনার 1000 টি ফাংশন মেমরি গ্রহণ করবে এবং সম্পাদনও করবে?

— eselk

কিছুই নয়, আমি "একটি" ফাংশনটি দেখতে পাইনি, এখন আমি বুঝতে পারি যে এটি কেন কাজ করে: api.jquery.com/one

— eselk

দুর্দান্ত সমাধান তবে হ্যান্ডলারে e.stopPropagation()গুলি চালানো থেকে প্রথম ইভেন্টটি থামানোর জন্য আমাকে ক্রোমে ব্যবহার করতে হয়েছিলone()

— অ্যান্টিএফএক্স

Answer 3

stopPropagationঅপশন খারাপ কারণ তারা অন্যান্য মেনু আছে যেগুলি HTML উপাদান পাসে হ্যান্ডেলার সংযুক্ত থাকতে পারে সহ অন্যান্য ইভেন্ট হ্যান্ডলার হস্তক্ষেপ করতে পারে।

এখানে ব্যবহারকারী 2989143 এর উত্তরের উপর ভিত্তি করে একটি সহজ সমাধান :

$('html').click(function(event) {
    if ($(event.target).closest('#menu-container, #menu-activator').length === 0) {
        $('#menu-container').hide();
    }
});

Answer 4

যদি আপনার ক্ষেত্রে কোনও প্লাগইন ব্যবহার করা ঠিক থাকে তবে আমি এখানে বেন আলমানের ক্লিকআউটসাইড প্লাগইনটি প্রস্তাব করছি :

এর ব্যবহার এতটা সহজ:

$('#menu').bind('clickoutside', function (event) {
    $(this).hide();
});

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

Answer 5

2 টি বিকল্প যা আপনি তদন্ত করতে পারেন:

• মেনুটি প্রদর্শন করার পরে, পৃষ্ঠার বাকী অংশটি coveringেকে এর পিছনে একটি বড় ফাঁকা ডিআইভি রাখুন এবং মেনুটি (এবং নিজেই) বন্ধ করার জন্য একটি অন-ক্লিক ইভেন্ট দিন। এটি লাইটবক্সগুলির সাথে ব্যবহৃত পদ্ধতির অনুরূপ যেখানে পটভূমিতে ক্লিক করা লাইটবক্সটি বন্ধ করে দেয়
• মেনুটি দেখানোর সময়, মেনুটি বন্ধ করে দেবে এমন এক-সময় ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করুন। আপনি এর জন্য jQuery এর '.one ()' ব্যবহার করেন।

Answer 6

আমি গ্রস্ম্টো'র সমাধানের একটি বৈকল্পিক পেয়েছি এবং ডেনিসের সমাধানটি আমার সমস্যার সমাধান করেছে।

$(".MainNavContainer").click(function (event) {
    //event.preventDefault();  // Might cause problems depending on implementation
    event.stopPropagation();

    $(document).one('click', function (e) {
        if(!$(e.target).is('.MainNavContainer')) {
            // code to hide menus
        }
    });
});

Answer 7

আমি একই পৃষ্ঠায় একই আচরণ সহ একাধিক উপাদান সহ এই সমাধানটি ব্যবহার করি:

$("html").click(function(event){
    var otarget = $(event.target);
    if (!otarget.parents('#id_of element').length && otarget.attr('id')!="id_of element" && !otarget.parents('#id_of_activator').length) {
        $('#id_of element').hide();
    }
});

স্টপপ্রপ্যাগেশন () একটি খারাপ ধারণা, এটি বোতাম এবং লিঙ্কগুলি সহ অনেক কিছুই standard

Comments

এটি দুর্দান্ত, তবে আপনি এটিকে সহজ করতে পারেন$target.closest('#menu-container, #menu-activator').length === 0

— কোড কমান্ডার

Answer 8

আমি সম্প্রতি একই সমস্যার মুখোমুখি হয়েছি। আমি নিম্নলিখিত কোডটি লিখেছি:

    $('html').click(function(e) {
      var a = e.target;
      if ($(a).parents('.menu_container').length === 0) {
        $('.ofSubLevelLinks').removeClass('active'); //hide menu item
        $('.menu_container li > img').hide(); //hide dropdown image, if any
     }
    });

এটা আমার জন্য নিখুঁতভাবে কাজ করেছে।

Answer 9

এই সম্পর্কে কি?

    $(this).mouseleave(function(){  
        var thisUI = $(this);
        $('html').click(function(){
                thisUI.hide();
            $('html').unbind('click');
         });
     });

Answer 10

ক্লিক-ইভেন্টের পরিবর্তে মোডসাউন-ইভেন্টটি ব্যবহার করা আমার কাছে আরও দরকারী বলে মনে হচ্ছে। ব্যবহারকারী যদি পৃষ্ঠাগুলির অন্যান্য ইভেন্টগুলিতে ক্লিক ইভেন্টগুলি ক্লিক করে তবে ক্লিক ইভেন্টটি কাজ করে না। JQuery এর এক () পদ্ধতির সাথে মিলিয়ে এটি দেখতে দেখতে এটির মতো দেখাচ্ছে:

$("ul.opMenu li").click(function(event){

   //event.stopPropagation(); not required any more
   $('#MainOptSubMenu').show();

   // add one mousedown event to html
   $('html').one('mousedown', function(){
       $('#MainOptSubMenu').hide();
   });
});

// mousedown must not be triggered inside menu
$("ul.opMenu li").bind('mousedown', function(evt){
    evt.stopPropagation();
});

Answer 11

এমনকি আমি একই পরিস্থিতি পেরিয়ে এসেছি এবং আমার এক পরামর্শদাতা এই ধারণাটি আমার নিজের মধ্যে রেখেছিলেন।

পদক্ষেপ: 1 যখন আমাদের বোতামটি ক্লিক করা উচিত তখন ড্রপ ডাউন মেনুটি ক্লিক করা উচিত। তারপরে বর্তমান সক্রিয় পৃষ্ঠায় নীচের দেখানো মত নীচের শ্রেণীর নাম "আরও_র্যাপ_ব্যাকগ্রাউন্ড" যুক্ত করুন

$('.ui-page-active').append("<div class='more_wrap_background' id='more-wrap-bg'> </div>");

পদক্ষেপ -2 তারপরে ডিভ ট্যাগের জন্য ক্লিক ক্লিক করুন

$(document).on('click', '#more-wrap-bg', hideDropDown);

যেখানে হাইডড্রপডাউন হ'ল ফাংশন হ'ল ড্রপ ডাউন মেনুটি লুকানোর জন্য

ড্রপ ডাউন মেনুটি আড়াল করার সময় পদক্ষেপ -3 এবং গুরুত্বপূর্ণ পদক্ষেপটি হ'ল আগের মতো আপনার যোগ করা শ্রেণিটি সরিয়ে ফেলুন

$('#more-wrap-bg').remove();

আমি উপরের কোডে এর আইডি ব্যবহার করে মুছে ফেলছি

.more_wrap_background {
  top: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  display: block;
  width: 100% !important;
  z-index: 999;//should be one less than the drop down menu's z-index
  height: 100% !important;
}

Answer 12

$("html").click( onOutsideClick );
onOutsideClick = function( e )
{
    var t = $( e.target );
    if ( !(
        t.is("#mymenu" ) ||     //Where #mymenu - is a div container of your menu
        t.parents( "#mymenu" ).length > 0
        )   )
    {
        //TODO: hide your menu
    }
};

এবং যখন আপনার মেনুটি দৃশ্যমান হচ্ছে তখনই শ্রোতাদের সেট করা আরও ভাল এবং মেনুটি গোপন হওয়ার পরে সর্বদা শ্রোতাদের অপসারণ করে।

Answer 13

আমি মনে করি আপনার এর মতো কিছু দরকার: http://jsfiddle.net/BenYoung/BXaqW/3/

$(document).ready(function() {
  $("ul.opMenu li").each(function(){
      $(this).click(function(){
            if($(this).hasClass('opened')==false){          
                $('.opMenu').find('.opened').removeClass('opened').find('ul').slideUp();
                $(this).addClass('opened'); 
                $(this).find("ul").slideDown();
            }else{
                $(this).removeClass('opened'); 
                $(this).find("ul").slideUp();               
            }
      });
  });    
});

আমি আশা করি এটি আপনার জন্য কার্যকর!

Answer 14

': দৃশ্যমান' নির্বাচক ব্যবহার করুন। যেখানে। মেনুয়েটম হ'ল লুকানোর উপাদান (গুলি) ...

$('body').click(function(){
  $('.menuitem:visible').hide('fast');
});

অথবা যদি আপনার কাছে ইতিমধ্যে একটি ভারতে। মেনুয়েটম উপাদান (গুলি) থাকে ...

var menitems = $('.menuitem');
$('body').click(function(){
  menuitems.filter(':visible').hide('fast');
});

Answer 15

এটি জটিল হতে হবে না।

$(document).on('click', function() {
    $("#menu:not(:hover)").hide();
});