单击隐藏列表样式

on click hide list style

本文关键字：样式 列表 隐藏 单击      更新时间：2024-01-23

当我点击body上的任何位置时，向所有我想隐藏的列表样式问好。在代码中，默认情况下它会隐藏，当我点击按钮时，它会显示一个列表。但当我点击任何地方时，它都无法隐藏。有人能告诉我这是怎么做的吗？？

.dss {
        background: #FFF;
        color: #0086EE;
        display: none;
        padding: 25px;
        position: absolute;
        top: 10px;
        z-index: 10;
        -moz-box-shadow: rgba(0,0,0,0.45) 0 0 9px;
        -webkit-box-shadow: rgba(0,0,0,0.45) 0 0 9px;
        box-shadow: rgba(0,0,0,0.45) 0 0 9px;
    }

另请参阅js代码：-

function show() {
        document.getElementById("demo").style.display = "block";
    }

Also see the html:-
<input type="submit" value="select services" onclick="show()" style="border: none; background: transparent; width: 95px;" />
        <!--<select onFocus="show()" style="background: #FFF;border: none; display:none;cursor: pointer;height: 33px;left: 0;opacity: 0;position: absolute;top: 10px;width: 8%;">
    <option>a</option>
  </select>-->
        <div class="dss" id="demo">
            <ul style="list-style: none;">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
            </ul>
        </div>

function show()
{
 document.getElementById("demo").style.display="block";
}
$(function(){
    $('#demo').click(function(event){ event.stopPropagation(); });
    $('input[type=submit]').click(function(event){  show(); event.stopPropagation(); });
    $('html').click(function(){
       $('#demo').hide();
    })
});

我假设您的问题是，您希望在单击按钮时隐藏下拉列表。

 document.getElementById("ButtonID").onclick=function()
 {
   document.getElementById("DropdownID").style.display='none'; // Thanks for the correction
 }

如果您还有其他问题，请添加您选择的下拉

如果您想通过单击正文中的任何位置来隐藏它，请替换buttonID单击。

那么javascript函数的问题就来了。你应该先写正文点击，然后点击显示ul的按钮。

  document.getElementsByTagName("body")[0].onclick = function(){//Hide UL}
  document.getElementById("ButtonID").onclick = fucntion(//show UL){}
相关文章：