html যখন ব্যবহারকারী এটির বাইরে ক্লিক করে তখন একটি ডিভিভি লুকানোর জন্য jQuery ব্যবহার করুন





15 Answers

আপনি ভাল ভালো কিছু দিয়ে যেতে চাই:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});
jquery html hide styling

আমি এই কোড ব্যবহার করছি:

$('body').click(function() {
   $('.form_wrapper').hide();
});

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

এবং এই এইচটিএমএল:

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

সমস্যা হচ্ছে ডিভিভির ভিতরে আমার লিঙ্ক আছে এবং ক্লিক করার সময় তারা আর কাজ করে না।




এই কোডটি পৃষ্ঠাটিতে কোনও ক্লিক ইভেন্ট সনাক্ত করে এবং #CONTAINER উপাদানটি লুকিয়ে রাখে এবং কেবল যদি উপাদানটিতে ক্লিক করা হয় তবে #CONTAINER উপাদানটি বা তার উত্তরসূরিগুলির মধ্যে একটি নয়।

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});



$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});



সবচেয়ে জনপ্রিয় উত্তর জন্য jQuery ছাড়া একটি সমাধান:

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains




এই কাজ মত কিছু না?

$("body *").not(".form_wrapper").click(function() {

});

অথবা

$("body *:not(.form_wrapper)").click(function() {

});



এবং আইপ্যাড এবং আইফোন মত টাচ ডিভাইসের জন্য আমরা নিম্নলিখিত কোড ব্যবহার করতে পারেন

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});



Prc322 এর সন্ত্রস্ত উত্তর বন্ধ নির্মিত।

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

এই একটি দম্পতি জিনিস যোগ করে ...

  1. "সীমাহীন" যুক্তি সঙ্গে একটি কলব্যাক সঙ্গে একটি ফাংশন মধ্যে স্থাপন
  2. Jquery এর .off () এ একটি কল যোগ করা হয়েছে যখন এটি চালানো হয়ে যাওয়ার পরে ডকুমেন্ট থেকে ইভেন্টটিকে অবরোধ করতে ইভেন্ট ইভেন্টস্পেসের সাথে যুক্ত করা হয়।
  3. মোবাইল কার্যকারিতা জন্য touchend অন্তর্ভুক্ত

আমি আশা করি এটা কারো সাহায্যে লাগবে!




var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});



 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p উপাদান নাম। যেখানে একটি আইডি বা বর্গ বা উপাদান নাম পাস করতে পারেন।




ফর্ম আবরণের বাইরে শীর্ষ স্তরের উপাদানের একটি ক্লিক ইভেন্ট সংযুক্ত করুন, উদাহরণস্বরূপ:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

এটি স্পর্শ ডিভাইসগুলিতেও কাজ করবে, কেবল নিশ্চিত করুন যে আপনি আপনার নির্বাচকদের তালিকাতে .form_wrapper এর পিতা-মাতার অন্তর্ভুক্ত করবেন না।




আমি এটা ভালো লেগেছে:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});



<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>



(শুধু prc322 এর উত্তর যোগ করা।)

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

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

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




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

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})



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

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

তারপর যখন এটি গোপন, ক্লিক ইভেন্ট unbind

$(document).unbind('click');



Related