html css toggle show/hide a div box when click like in facebook navigation?

问题

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 :))

回答1:

Using CSS

.divs 
{
  display: none;
}
a:hover + .divs 
{
    display: block;
    position: absolute;
    background-color: purple;
    color: #FFFFFF;
    width: 200px;
    height: 200px;
}
.divs:after
{
   content:"";
   position: absolute;
   display: block;
   width: 0;
   height: 0;
   border-bottom: 20px solid purple; 
   border-left: 10px solid transparent; 
   border-right: 10px solid transparent; 
   margin: -40px 50px 10px 10px;
}

LIVE DEMO

.divs {
  display: none;
}

a:hover+.divs {
  display: block;
  position: absolute;
  background-color: purple;
  color: #FFFFFF;
  width: 200px;
  height: 200px;
}

.divs:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-bottom: 20px solid purple;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: -40px 50px 10px 10px;
}

<a><img src="http://i.stack.imgur.com/s7eOO.jpg?s=32&g=1" /></a>
<div class="divs">
  Stuff here...
</div>

回答2:

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

and here is a key what you want,

jQuery:

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

LIVE DEMO

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

Hope it helps you!

回答3:

Here is my jQuery solution,

I made your box of stuff display on hover and then if the body is clicked it is hidden.

$('img').hover(function(){
   $('div#box').show();
});
$('body').click(function(){
   $('div#box').hide();
});

Here is a fiddle to demonstrate. http://jsfiddle.net/joey6978/zLXK8/

来源：https://stackoverflow.com/questions/21693509/html-css-toggle-show-hide-a-div-box-when-click-like-in-facebook-navigation

标签

javascript

jquery

html

css