html css切换显示/隐藏div框，如在Facebook导航中单击一样? [英] html css toggle show/hide a div box when click like in facebook navigation?

问题描述

我想做一个类似下拉菜单的div，就像在Facebook上一样这里问题是当您将鼠标悬停时div不会停留.我如何切换它.就像它只会在您在div之外单击时消失?像Facebook的导航栏?

hi i wanted to make a similar dropdown div just like on facebook here the problem is the div doesnt stay when you hover out.how can i toggle it. like it will only disappear when you click outside the div? like facebook navigation bar?

CSS

    .divs {
        display: none;
    }

    a:hover + .divs {
        display: block;
        background-color:white;
    }

HTML

    <a><img src="someIconsButtons.png"></a>
    <div class="divs">
    Stuff here...
    </div>

我该怎么做到?谢谢，请你是个温柔的家伙，我是个新手:))

how can i attain that? thanks please be gentle guys im kinda newbie :))

推荐答案

您可以使用 jQuery 来实现.试试这个:

You can achieve this by using jQuery. Try this:

HTML:

<a id="showdivblock">Show Div Block</a>
<div id="divblock">
here you go..
</div>

CSS

#divblock 
{
    position: absolute;
    background-color: blue;
    color: #FFFFFF;
    width: 300px;
    height: 100px;
    margin-top: 10px;
}
#divblock:after
{
   content:"";
   position: absolute;
   display: block;
   width: 0;
   height: 0;
   border-bottom: 20px dashed blue; 
   border-left: 10px solid transparent; 
   border-right: 10px solid transparent; 
   margin: -40px 50px 10px 10px;
}

这是您想要的钥匙，

jQuery:

$('#divblock').hide();
$('#showdivblock').click(function(e){
    e.stopPropagation();
    $('#divblock').slideToggle();
});
$('#divblock').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('#divblock').slideUp();
});

实时演示

$('#divblock').hide();
$('#showdivblock').click(function(e) {
  e.stopPropagation();
  $('#divblock').slideToggle();
});
$('#divblock').click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $('#divblock').slideUp();
});

#divblock {
  position: absolute;
  background-color: blue;
  color: #FFFFFF;
  width: 300px;
  height: 100px;
  margin-top: 10px;
}

#divblock:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-bottom: 20px dashed blue;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: -40px 50px 10px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="showdivblock">Show Div Block</a>
<div id="divblock">
  here you go..
</div>

希望它对您有帮助！

这篇关于html css切换显示/隐藏div框，如在Facebook导航中单击一样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！