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





hide styling (25)


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

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

$('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>

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




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

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

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




সমাধান আপডেট করা হয়েছে:

  • পরিবর্তে mouseenter এবং mouseleave ব্যবহার করুন
  • হোভার ব্যবহার লাইভ ইভেন্ট বাঁধাই

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});



dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});






$(document).ready(function() {
	$('.modal-container').on('click', function(e) {
	  if(e.target == $(this)[0]) {
		$(this).removeClass('active'); // or hide()
	  }
	});
});
.modal-container {
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
	width: 50%;
	height: auto;
	margin: 20px;
	padding: 20px;
	background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
	<div class="modal">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
	</div>
</div>




<!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 এর সন্ত্রস্ত উত্তর বন্ধ নির্মিত।

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 অন্তর্ভুক্ত

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




জীবন্ত উদাহরণ

ক্লিক করুন এলাকা লক্ষ্যবস্তু উপাদান বা তার সন্তানের মধ্যে নয়

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

হালনাগাদ:

jQuery স্টপ প্রচার সবচেয়ে ভাল সমাধান

জীবন্ত উদাহরণ

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

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

$(document).click(function(){
    $(".dropdown").hide();
});



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

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



এমনকি sleaker:

$("html").click(function(){ 
    $(".wrapper:visible").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';
    }
   }
})



এখানে অন্য থ্রেডে পাওয়া একটি জেএসফিল্ড, এসসি কী দিয়ে কাজ করে: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

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

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })



(শুধু 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();
    }
});

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




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

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




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

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



সবচেয়ে জনপ্রিয় উত্তর জন্য 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




আপনি StopPropagation উপর নির্ভর করার পরিবর্তে শরীরের জন্য আগুন যে ক্লিক ইভেন্ট লক্ষ্য লক্ষ্য করতে চান হতে পারে।

কিছুটা এইরকম:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

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




একই সমস্যা ছিল, এই সহজ সমাধান সঙ্গে এসেছিলেন। এটা এমনকি recursive কাজ করছে:

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

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



অনেকগুলি উত্তর, অবশ্যই যোগ করার অধিকার হতে হবে ... আমি একটি বর্তমান (jQuery 3.1.1) উত্তর দেখতে পাইনি - তাই:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});



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

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



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

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

});

অথবা

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

});



ESC কার্যকারিতা সঙ্গে লাইভ ডেমো

ডেস্কটপ এবং মোবাইল উভয় কাজ করে

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

কিছু ক্ষেত্রে যদি আপনি নথিটিতে ক্লিক করলে আপনার উপাদানটি সত্যিই দৃশ্যমান হবে তা নিশ্চিত করতে হবে: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();




var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

FIDDLE




একটি উপাদান বাইরে একটি ক্লিক সনাক্ত কিভাবে?

এই প্রশ্নটি এত জনপ্রিয় এবং এতগুলি উত্তর আছে যে এটি বিভ্রান্তিকর জটিল। প্রায় আট বছর এবং কয়েক ডজন উত্তর পরে, আমি সত্যই অবাক হয়েছি যে অ্যাক্সেসিবিলিটির জন্য কতটা যত্ন দেওয়া হয়েছে।

ব্যবহারকারী যখন মেনু এলাকার বাইরে ক্লিক করে তখন আমি এই উপাদানগুলি লুকাতে চাই।

এটি একটি মহৎ কারণ এবং প্রকৃত সমস্যা। প্রশ্নটির শিরোনাম- যা বেশিরভাগ উত্তর সম্বোধন করার চেষ্টা করা হয় - একটি দুর্ভাগ্যজনক লাল হরিণ রয়েছে।

ইঙ্গিত: এটি "ক্লিক করুন" শব্দ!

আপনি আসলে হ্যান্ডলার ক্লিক বাঁধতে চান না।

আপনি যদি ডায়ালগটি বন্ধ করতে হ্যান্ডলারদের বাঁধন করেন তবে আপনি ইতিমধ্যে ব্যর্থ হয়েছেন। আপনি ব্যর্থ হওয়ার কারণ হ'ল প্রত্যেকে click ইভেন্টগুলিকে ট্রিগার করে না। ব্যবহারকারীরা মাউস ব্যবহার না করে আপনার ডায়ালগটি থেকে পালাতে সক্ষম হবে (এবং আপনার পপ-আপ মেনু যুক্তিযুক্তভাবে একটি প্রকারের ডায়ালগ) ট্যাব টিপে, এবং তারপর ডায়ালগের পিছনে কোনও সামগ্রী ট্রিগার না করেই সেটি পড়তে পারবে না ইভেন্ট।

তাই আসুন প্রশ্ন refrase।

একজন ব্যবহারকারী যখন এটির সাথে সম্পন্ন হয় তখন কোনও সংলাপ বন্ধ করে?

এই লক্ষ্য। দুর্ভাগ্যবশত, এখন আমরা userisfinishedwiththedialog ইভেন্টটি বন্ধ করতে হবে, এবং যে বাঁধাই তাই সহজবোধ্য নয়।

সুতরাং কিভাবে আমরা একটি ব্যবহারকারী একটি ডায়ালগ ব্যবহার করে সমাপ্তি সনাক্ত করতে পারেন?

focusout ইভেন্ট

একটি ভাল শুরু ফোকাস ডায়ালগ বামে কিনা নির্ধারণ করা হয়।

ইঙ্গিত: blur ইভেন্টের সাথে সাবধান থাকুন, ইভেন্টটি বুদবুদ পর্যায়ে আবদ্ধ থাকলে প্রচার করা হয় না!

jQuery এর focusout ঠিক সূক্ষ্ম হবে। আপনি যদি jQuery ব্যবহার করতে না পারেন, তবে আপনি ক্যাপচারিং পর্যায়ে blur ব্যবহার করতে পারেন:

element.addEventListener('blur', ..., true);
//                       use capture: ^^^^

এছাড়াও, অনেক সংলাপের জন্য আপনাকে কন্টেইনারকে ফোকাস পাওয়ার অনুমতি দিতে হবে। tabindex="-1" যোগ করুন ডায়ালগটিকে অন্যথায় ট্যাবিং প্রবাহে বাধা না দিলে গতিশীলভাবে ফোকাস পেতে অনুমতি দেয়।

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on('focusout', function () {
  $(this).removeClass('active');
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

আপনি যদি এক মিনিটেরও বেশি সময়ের জন্য সেই ডেমোটি দিয়ে খেলেন তবে আপনার দ্রুত সমস্যা দেখা উচিত।

প্রথমটি হল ডায়ালগের লিঙ্কটি ক্লিকযোগ্য নয়। এটিতে বা ট্যাবে ক্লিক করার চেষ্টা করা হলে মিথস্ক্রিয়া সংঘটিত হওয়ার আগে ডায়ালগ বন্ধ করা হবে। কারণ focusin ইভেন্টটি আবার ট্রিগার করার আগে ভিতরের উপাদানটি ফোকাস করা একটি focusout ইভেন্ট ট্রিগার করে।

ফিক্স ইভেন্ট লুপ রাষ্ট্র পরিবর্তন সারি হয়। এটি setImmediate(...) , বা setTimeout(..., 0) ব্যবহার করে করা যেতে পারে যা ব্রাউজারগুলির জন্য setImmediate সমর্থন করে না। একবার সারিবদ্ধ হলে এটি পরবর্তী focusin দ্বারা বাতিল করা যেতে পারে:

$('.submenu').on({
  focusout: function (e) {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function (e) {
    clearTimeout($(this).data('submenuTimer'));
  }
});

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

দ্বিতীয় সমস্যা হলো লিঙ্কটি আবার চাপলে ডায়ালগটি বন্ধ হবে না। এটি ডায়ালগটি ফোকাস হ্রাস করে, ঘনিষ্ঠ আচরণকে ট্রিগার করে, তারপরে লিঙ্ক ক্লিকটি পুনরায় খুলতে ডায়ালগটিকে ট্রিগার করে।

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

এই পরিচিত হওয়া উচিত
$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

Esc কী

আপনি যদি ফোকাস স্টেটস পরিচালনা করে সম্পন্ন হন বলে মনে করেন তবে ব্যবহারকারীর অভিজ্ঞতাটি সহজ করার জন্য আপনি আরো কিছু করতে পারেন।

এটি প্রায়শই একটি "চমৎকার" বৈশিষ্ট্য থাকে তবে এটি সাধারণ যে কোনও ধরণের মোডাল বা পপআপ থাকলে Esc কীটি বন্ধ করে দেবে।

keydown: function (e) {
  if (e.which === 27) {
    $(this).removeClass('active');
    e.preventDefault();
  }
}

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('active');
      e.preventDefault();
    }
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

যদি আপনি জানেন যে আপনার কথোপকথনের মধ্যে ফোকাসযোগ্য উপাদান আছে, তবে সরাসরি ডায়ালগটি ফোকাস করতে হবে না। আপনি যদি একটি মেনু তৈরি করেন তবে পরিবর্তে আপনি প্রথম মেনু আইটেমটি ফোকাস করতে পারেন।

click: function (e) {
  $(this.hash)
    .toggleClass('submenu--active')
    .find('a:first')
    .focus();
  e.preventDefault();
}

$('.menu__link').on({
  click: function (e) {
    $(this.hash)
      .toggleClass('submenu--active')
      .find('a:first')
      .focus();
    e.preventDefault();
  },
  focusout: function () {
    $(this.hash).data('submenuTimer', setTimeout(function () {
      $(this.hash).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('submenuTimer'));  
  }
});

$('.submenu').on({
  focusout: function () {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('submenuTimer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('submenu--active');
      e.preventDefault();
    }
  }
});
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu:after {
  clear: both;
  content: '';
  display: table;
}
.menu__item {
  float: left;
  position: relative;
}

.menu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
  background-color: black;
  color: lightblue;
}

.submenu {
  border: 1px solid black;
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
}
.submenu--active {
  display: block;
}

.submenu__item {
  width: 150px;
}

.submenu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}

.submenu__link:hover,
.submenu__link:focus {
  background-color: black;
  color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#menu-1">Menu 1</a>
    <ul class="submenu" id="menu-1" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
  <li class="menu__item">
    <a  class="menu__link" href="#menu-2">Menu 2</a>
    <ul class="submenu" id="menu-2" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
</ul>
lorem ipsum <a href="http://example.com/">dolor</a> sit amet.

WAI-ARIA ভূমিকা এবং অন্যান্য অ্যাক্সেসযোগ্যতা সমর্থন

এই উত্তরটি আশাযোগ্যভাবে এই বৈশিষ্ট্যটির জন্য অ্যাক্সেসযোগ্য কীবোর্ড এবং মাউস সমর্থনের বুনিয়াদিগুলি জুড়ে দেয়, তবে এটি ইতিমধ্যে বেশ বড় আকারের। আমি WAI-ARIA ভূমিকা এবং গুণাবলীগুলির যেকোনো আলোচনা এড়াতে যাচ্ছি, তবে আমি অত্যন্ত সুপারিশ করি যে প্রয়োগকারীরা বিস্তারিত জানার জন্য স্পেকটি পড়ুন তারা কি ভূমিকা এবং অন্য কোন উপযুক্ত গুণাবলী ব্যবহার করা উচিত।





jquery html hide styling