我最近在我的网站上添加了一个Google搜索栏。即使搜索未激活,我也发现它阻止了导航。如果我带上导航z-index,则会在搜索结果上显示。当搜索栏没有滚动时,如何使按钮“可点击”。在此处查看页面http://etterengineering.com/SampleIndex.html
这是我的HTML:
<div id="cse-search-form" style= "z-index:999999; top:0px;"></div>
<div id="cse-search-form" style="width: 100%;"></div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.SHINY});
google.setOnLoadCallback(function() {
var customSearchControl = new
google.search.CustomSearchControl('012677673255316824096:sean13fvlei');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
customSearchControl.draw('cse', options);
}, true);
</script>
<div id="cse" style="width:43%; z-index:999997; top:40px; height:650px;"></div>
我的CSS:
#cse-search-form {
position:absolute;
z-index:999999;
width:270px;
left:680px;}
#cse{position:absolute; z-index:999997; left: 530px;
overflow:auto;overflow-x:hidden; pointer-events:none;
}
#dropdown {
margin: 0;
padding: 0;
height: 1em;
}
#dropdown li {
float: left;
list-style: none;
}
#dropdown li a {
display: block;
width:12em;
padding: 3px 0px;
background-color: transparent;
white-space:pre;
font-size:.8em;
letter-spacing: -.4px;
text-align:center;
z-index: 24000;
font-family: Verdana;
color: #424242;
position: relative; top:105px; left: 0px;
text-decoration: none;
}
#dropdown li a:hover {color:#000000;}
/* Sub Drop Down Organization */
#dropdown li ul {
display: none;
width: 18em;
letter-spacing: 1em;
text-align:center;
}
/* Sub Drop down Hover */
#dropdown li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown li:hover li a {
word-spacing: .025em;
letter-spacing: -.05em;
font-size:.8em;
font-family: Verdana;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF),
to(#ADADAD));
background: -moz-linear-gradient(top, #FFFFFF, #ADADAD);
}
#dropdown li li a:hover {color:#ff0000;}
答案 0 :(得分:0)
我会隐藏“cse”<div>
,直到你需要它在屏幕上显示。
编辑 - 我对Google API并不是很熟悉,但考虑到你已经拥有的代码,我认为你会做这样的事情:
$('#cse').hide();
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('012677673255316824096:sean13fvlei');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
customSearchControl.draw('cse', options);
$('#cse').show();
}, true);
现在必须在单击“清除”按钮时再次隐藏它。我在Google文档中找不到有关如何为其设置回调的内容(实际上我不确定任何人如何在该混乱中找到任何 Google称之为“参考”,但您只想再次调用“.hide()”。