jquery 메뉴 표시 숨기기

github에서 찾은 일부 코드를 테스트하여 일부는 좋아하는 것으로 변경했지만 메뉴를 다시 클릭하면 div를 숨기지 않는 것처럼 보입니다. 다음은 행운을 비면서 수정하려고했던 javascript 파일입니다.jquery 메뉴 표시 숨기기

(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>

출처

2016-08-11 Dida

당신은 HTML aswell를 제공 할 수 있습니까? 그냥 쉽게 테스트 할 수 있습니다. – Imbue

@ user2979822 맨 아래에 코드를 추가했습니다. – Dida

당신은 간다.

나는 스팬을 클릭 할 수 없기 때문에 CSS에 약간의 변화를주었습니다.

내가 한 것은 메뉴가 열려 있는지 여부를 결정하는 초기 변수를 설정하고 그 컨트롤을 클릭하면 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/

출처

2016-08-11 20:31:28 Imbue

정말 고마워요! 정말 고맙습니다. 훌륭한 설명을 주셨습니다. – Dida

jquery 메뉴 표시 숨기기

답변

관련 문제