css - 单击或触摸时切换 div 并在单击/触摸/滚动到外部时隐藏

Question

我需要通过按下按钮或切换来隐藏特定的 div，所以基本上:按一次隐藏，再按一次显示，按屏幕的任何区域隐藏，然后滚动隐藏。如果可能的话，我希望在 CSS 中完成隐藏/显示规则。谢谢。

HTML:

<input type="checkbox" id="toggle1" />
<div>
<label for="toggle1" class="toggle1" data-open="OPEN" data-close="CLOSE" onclick></label>
<ul class="catmenu">
  <li><a href="/">AAA</a></li>
  <li><a href="/">BBB</a></li>
  <li><a href="/">CCC</a></li>
</ul>
</div>

<input type="checkbox" id="toggle2" />
<div>
<label for="toggle2" class="toggle2" data-open="OPEN" data-close="CLOSE" onclick></label>
<ul class="catmenu">
  <li><a href="/">AAA</a></li>
  <li><a href="/">BBB</a></li>
  <li><a href="/">CCC</a></li>
</ul>
</div>

CSS:

.header { position: relative; }
#toggle1, .toggle1 { display: none; }
.catmenu > li { display: none;  }

#toggle2, .toggle2 { display: none; }

.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

@media only screen and (max-width: 767px){
.catmenu { display: none; opacity: 0; width: 100%; position: absolute; }
.catmenu > li { display: block; width: 100%; margin: 0; }
#toggle1:checked + div .catmenu { display: block; opacity: 1;}

#toggle2:checked + div .catmenu { display: block; opacity: 1;}
}

.header{
min-height: 100px;
height: 100%;
padding: 0 20px;
background: #FFFFFF;
}

.header > h1 {
float: left;
padding: 30px 0 0;      
font-style: italic;
font-size: 28px;
color: #DFDFDF;
}

.nav{ 
display: block; 
float: right; 
}

.toggle1{ 
z-index: 2; 
display: inline-block;
width: 50px;
float: left;
}

.toggle2{ 
z-index: 2; 
display: inline-block;
width: 50px;
float: left;
}

@media only screen and (max-width: 767px){

.catmenu{
    border-top: 1px solid #51C1F1;
    margin: 35px 0 0 0;
    text-align: left;
    background: none repeat scroll 0 0 #EEEEEE;
    padding: 14px 0 5px 2px;
    font-family: "Microsoft JhengHei", arial narrow, serif;
    font-size: 20px;
    line-height: 28px;
}

.catmenu > li {
display: inline-block;
text-align: left;
width: 47px;
margin: 0px -1px 0 0;
}

.catmenu > li > a{
display: block;
padding: 0 0;
color: #333333;
}

.catmenu > li > a:hover, .catmenu > li > a:focus{
}

.toggle1:after {
    content: attr(data-open);
    display: inline-block;
    width: 50px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: none;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 35px;
    color: #333333;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

.toggle2:after {
    content: attr(data-open);
    display: inline-block;
    width: 50px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: none;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 35px;
    color: #333333;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

.toggle1:hover:after{
    background: none;
    text-align: center;
    color: #333333;
}

#toggle1:checked + div .toggle:after{
    content: attr(data-close);
    background: #45ABD6;
    text-align: center;
    color: #ffffff;
}


.toggle2:hover:after{
    background: none;
    text-align: center;
    color: #333333;
}

#toggle2:checked + div .toggle2:after{
    content: attr(data-close);
    background: #45ABD6;
    text-align: center;
    color: #ffffff;
}
}

Answer 1

根据用户操作隐藏和显示 div 需要监视这些操作(事件)，这仅靠 CSS 是不可能的。

您可以使用 jquery 执行以下操作，以根据单击 ID 为 toggle 的元素来显示/隐藏 ID 为 div1 的 div:

$('#toggle1').on('change', function () {
    var div1 = $('#div1');
    if (div1.is(":visible")) {
        div1.show();
    }
    else {
        div1.hide();
    }
});

如果 toggle1 是一个复选框，并且您希望显示/隐藏与选中状态一致，您可以这样做:

$('#toggle1').on('change', function () {
    var div1 = $('#div1');
    if ($(this).is(":checked")) {
        div1.show();
    }
    else {
        div1.hide();
    }
});

滚动时隐藏:

$(window).on('scroll', function () {
    $('#div1').hide();
});

在 div 外部点击时隐藏:

$(document).on('mouseup', function (e)
{
    var div1 = $('#div1');
    // If the click is not on the div or a descendant of the div, hide the div
    if (!div1.is(e.target) && div1.has(e.target).length === 0)
    {
        div1.hide();
    }
});

更新:这是一个有效的 JSFiddle:http://jsfiddle.net/yy2vM/