平板电脑/手机上的JS下拉菜单关闭按钮?

时间:2012-01-12 21:05:32

标签: javascript css menu drop-down-menu

我一直在我的网站上使用以下CSS下拉框,我注意到当你点击激活ipad / iphone上的下拉菜单时,除了刷新页面之外没有办法关闭下拉菜单

是否有可以添加到平板电脑/手机用户下拉框底部的JS代码,以便他们可以在不进行选择时关闭该框?

    /* css */

    #dropdown {

    }
    #dropdown ul {


    }
    #dropdown li {

    }
    .dropmain1 {
        background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
        width: 98px;
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
                margin-top: 10px;   

        -moz-box-shadow: 3px 9px 8px #888;

    -webkit-box-shadow: 3px 9px 8px #888;

    box-shadow: 3px 9px 8px #888;

        }

    .dropmain2 {
        background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
        -moz-border-radius-bottomleft: 7px;
        -moz-border-radius-bottomright: 7px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 5px;
        -moz-box-shadow: 3px 5px 8px #888;
        -webkit-box-shadow: 3px 5px 8px #888;
        box-shadow: 3px 5px 8px #888;
    }

    #drop2 {  width: 633px;     margin-top: 10px;       padding: 9px; }
    #drop3 {  width: 200px;     margin-top: 10px;       padding: 9px;  }
    #drop4 {  width: 200px;     margin-top: 10px;       padding: 9px; }
    #drop5 {  width: 200px;     margin-top: 10px;       padding: 9px; }


        /*this is the css for the horizontal version*/
        .horizontal ul{
            border: none;
            list-style-type: none;
            padding:0;margin:0;
        }
        .horizontal ul li{
            float: left;
            position: relative;
            margin:0;padding:0;
        }
        a.toplevel {
            display: block;
            color: #525252;
            text-decoration: none;
            overflow: hidden;
            display:inline-block;
            padding-left:15px;
            padding-right: 15px;
            line-height:18px;
            background:transparent url(images/misc/menu_open.gif) center left no-repeat;

        }
        .horizontal li li{
            float: none;
            margin-bottom: -1px;
        }
        .horizontal li li.last{
            border-bottom: none;
        }
        .horizontal ul li ul{
            position: absolute;
            top: 1.3em;
            left: -1px;
        }
        .horizontal ul ul ul{
            width: 130px;
            top: -1px;
            left: 128px;
            margin-top: 0;
        }
        .horizontal.left ul ul ul,.horizontal .left ul ul{
            top: -1px;
            left: -128px;
        }
        .horizontal ul li li a{
            padding: 12px;

        }
        .horizontal ul li:first-child>a{ 
        }
        .horizontal ul li a.first{  
        }
        .horizontal ul li li a.first{
        }
        .horizontal ul li li:first-child>a{  
        }
        div.horizontal ul li.pixelfix ul{
            left: 0;
        }
        div.horizontal ul li.pixelfix ul ul{
            left: 128px;
        }
        /*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
        .mlmenu li ul{
            display: none;
        }
        .mlmenu li:hover>ul{
            display: block;
        }
        /*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
        .accessible li ul{
            display: block;
        }
        /*Code to show an element has a child*/
        .mlmenu.plus li a:first-child:not(:last-child):after{
            content: ' ';
        }
        .plus a span{
            padding-left: .5em;
        }
        .noshow{
            visibility: hidden;
        }
        /*colors for menu*/

        }
        .bluewhite li a{
            background-color: ;
            color: #ffffff;
        }
        .bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{

            /* HOVER */
        }
        .bluewhite li:first-child>a:hover{

        }
        .bluewhite ul{
            border-color: #000033;
        }






        #ldrop a:link, #ldrop a:visited {


        }
        #ldrop a:hover, #ldrop a:active {


        }


        #holdjump1 {
            padding-left: 8px;  padding-bottom: 6px;
        }
        #holdjump1 div {
        }
        #holdjump1 a:link, #holdjump1 a:visited {
            padding: 2px 0 2px 3px; margin:0;
        }
        #holdjump1 li {
            padding:0; margin:0;
        }



        .fjl {
            display: inline-block; 
            border-bottom: 1px dotted #c1c1c1; 
            width:30%; 
            margin: 0 5px 0 5px; 
            padding: 2px;
            font-size: 12px; 
            font-weight: normal;
        }
        .fjl a:link, .fjl a:visited {
        display: block;
        }
        .fjl a:active, .fjl a:hover {
        background: #a1a1a1;
        text-decoration: none;
        color: #ffffff;
        }







<div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay">

    <ul>
                <li>Menu Link</li>

                      <ul> <li>test</li>  </ul>

        </ul>

</div>

2 个答案:

答案 0 :(得分:0)

您可以尝试使用JQuery。我不确定如何在完整的javascript中执行此操作但是如果您下载jquery库,请链接到它,然后尝试这样的操作它可能会有效。

<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
    $(this).show();
    $('div#dropdown ul li').click(function() {
    $(this).hide();

       });
    });
});
</script>

<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
    $(this).slideDown();
    $('div#dropdown ul li').click(function() {
    $(this).slideUp();

       });
    });
});
</script>

答案 1 :(得分:0)

哎呀!我刚注意到我发布了ul列表中错误的“顺序”。

我发布了     $('div#dropdown ul li')。点击

实际上应该

$('div#dropdown li ul')。点击或     $('div#dropdown li ul li')。点击

我之前发布的是要打开和关闭的主要链接。我发布的新方法将打开关闭子菜单。 UL里面的LI。要添加更多子菜单功能,只需继续添加元素即可。

$('div#dropdown li ul // 1-level drop down
$('div#dropdown li ul li ul // 2-level drop down
$('div#dropdown li ul li ul li ul // 3 level drop down.

或者您可以为每个级别创建类。实施例

而不是2级下降      $('div#dropdown li ul li ul

你可以做这样的事情&gt;&gt;

带有2级子菜单的示例菜单

<ul>
   <li>link1<ul class="sub1">
   <li>sublink1-1<ul>
   <li>sub-sublink1-1</li>
   <li>sub-sublink1-2</li></ul></li></ul></li>
</ul>

Jquery的

<script>
$(document).ready(function() {
    $('ul.sub1').click(function() {
    $(this).slideToggle();

  });
});
</script>

这会导致第二级子菜单在点击时向上滑动或向下滑动,从而“显示”和“隐藏”。

希望这会有所帮助!