显示隐藏 jquery 菜单

Question

我正在测试我在 github 上找到的一些代码，我根据自己的喜好做了一些改动，但我似乎无法在单击菜单时隐藏 div第二次。这是我尝试修改但没有成功的 javascript 文件。

(function ($) {

$.fn.popmenu = function (options) {

    var settings = $.extend({
        'controller': true,
        'width': '100%',
        'background': '#fff',
        'focusColor': '#BEACAC',
        'top': '-15',
        'iconSize': '33.3%',
        'color': '#000',
        'border': '0px'
    }, options);
    if (settings.controller === true) {
        var temp_display = 'none';
    } else {
        var temp_display = 'block';
    }
    var tar = $(this);
    var tar_body = tar.children('ul');
    var tar_list = tar_body.children('li');
    var tar_a = tar_list.children('a');
    var tar_ctrl = tar.children('.pop_ctrl');

    function setIt() {
        tar_body.css({
            'display': temp_display,
            'position': 'absolute',
            'margin-top': -settings.top,
            'margin-left': -settings.left,
            'background': settings.background,
            'width': settings.width,
            'float': 'left',
            'padding': '0',
            'border': settings.border
        });
        tar_list.css({
            'display': 'block',
            'color': settings.color,
            'float': 'left',
            'width': settings.iconSize,
            'height': settings.iconSize,
            'text-align': 'center',
        });
        tar_a.css({
            'text-decoration': 'none',
            'color': settings.color
        });
        tar_ctrl.hover(function () {
            tar_ctrl.css('cursor', 'pointer');
        }, function () {
            tar_ctrl.css('cursor', 'default')
        });
        tar_ctrl.click(function (e) {
            e.preventDefault();
            tar_body.show('fast');
            $(document).mouseup(function (e) {
                var _con = tar_body;
                if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                    _con.hide();
                }
                //_con.hide(); some functions you want
            });
        });
        tar_list.hover(function () {
            $(this).css({
                'background': settings.focusColor,
                'cursor': 'pointer'
            });
        }, function () {
            $(this).css({
                'background': settings.background,
                'cursor': 'default'
            });
        });
    }
    return setIt();

};

}(jQuery));

我还在 menu.php 页面上尝试了一些脚本，其中有一个函数。我尝试将函数放在 if 语句中，但这也不起作用。

menu.php

 $(function(){
        $('#demo_box').popmenu();
 })

这是我第一次发帖，希望我没有违反本网站的任何规则。

另外，如果你们想看的话，我可以添加我试过的代码。

谢谢。迪达

更新：

(menu.php)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu</title>
<link rel="stylesheet" href="jQueryPopMenu-master/lib/font-awesome/css/font-awesome.min.css"/>
<style>
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: red;
display: inline;
height: 70px;
}
#demo_box{

 }
.demo_ul{
padding-left: 2%;

}

.pop_ctrl{
margin-left: 20%;
}
.fa{
font-size: 40px;
}
#container ul {
list-style-type: none;
padding: 0;
overflow: hidden;
z-index:1000;
}

#container li {
float: left;
}

#container li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.search {
padding:8px 10px;
border:0px solid #dbdbdb;
font-size: 14px;
}
input:focus {
outline:none;
}

.button {
position:relative;
padding:6px 10px;
left:-8px;
border:2px solid white;
background-color:red;
color:#fafafa;
font-size: 14px;
}
.button:hover  {
background-color:#fafafa;
color:#207cca;
}

    pre{
        font-family: Consolas,Liberation Mono,Courier,monospace;
        font-size: 13px;
    }
    @media screen and (orientation: portrait){
        pre{
            overflow-x: scroll;
        }
    }
</style>
</head>
<body>

<div id="container">
    <ul>

<li>
    <div id="demo_box">
        <span class="pop_ctrl"><i class="fa fa-bars"></i></span>
        <ul id="demo_ul">
            <li class="demo_li"><a href="http://www.gucheen.pro"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>
            <li class="demo_li"><a href="http://blog.gucheen.pro"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></a></li>
            <li class="demo_li"><div><i class="fa fa-cog" ></i></div><div>settings</div></li>
            <li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
            <li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
            <li class="demo_li"><div><i class="fa fa-folder"></i></div><div>Files</div></li>
            <li class="demo_li"><div><i class="fa fa-heart-o"></i></div><div>Favourites</div></li>
            <li class="demo_li"><div><i class="fa fa-mobile"></i></div> <div>Mobile</div></li>
            <li class="demo_li"><div><i class="fa fa-power-off"></i></div>     <div>Exit</div></li>
        </ul>
    </div>
</li>
<li style="float:right; padding-right:2%;">
<form>
<input class="search" type="text" placeholder="Search" name="Search"    autofocus="autofocus">
<input class="button" type="button" value="Search"></input>

 </form>

</li>
</div>
</ul>
<script src="jQueryPopMenu-master/lib/jquery/jquery.min.js"></script>
<script src="jQueryPopMenu-master/src/jquery.popmenu.js"></script>
<script>
    $(function(){
        $('#demo_box').popmenu();

    })

</script>
</body>
</html>

Answer 1

给你。

我对 css 做了一些操作，因为我无法点击跨度，我想 fiddle 对它做了一些操作。

我所做的是设置一个初始变量来确定菜单是否打开，并在您单击控件时在 true 和 false 之间切换。您还可以证明使用 jQuery 中已经存在的“.toggle()”选项是为了更加简单。

   var menuIsOpen = false;

    tar_ctrl.click(function (e) {
        e.preventDefault();

        if(menuIsOpen){
                tar_body.hide('fast');
        } else {
                tar_body.show('fast');
        }

        menuIsOpen = (menuIsOpen ? false : true);

    });

https://jsfiddle.net/rq1zymv2/2/

显示隐藏 jquery 菜单

Show-hide jquery menu

jquery

show-hide