2
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>
あなたは、HTML aswellを供給することはできますか？テストを簡単にするだけです。 – Imbue
@ user2979822私はコードを一番下に追加しました。 – Dida