单击或触摸时切换 div 并在单击/触摸/向外滚动时隐藏

Posted 2023-03-05

【中文标题】单击或触摸时切换 div 并在单击/触摸/向外滚动时隐藏

【英文标题】：Toggle div on click or touch and hide on click/touch/scroll outside

【发布时间】：2014-04-13 23:26:12

【问题描述】：

我需要通过按按钮或切换来隐藏特定的 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;

【问题讨论】：

我认为你最好的选择是用 JS 来做这个。

【参考方案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/

【讨论】：

谢谢，但它不工作。切换位于固定标题菜单上。有人可以帮忙吗？

请更具体一点 - 哪个部分不起作用，您看到了什么行为？

您的问题未指定移动设备。我对移动设备不太熟悉，但很可能您需要绑定到不同的事件，也许有触摸或点击事件？