У меня есть ссылки в нижнем колонтитуле, при нажатии на которые отображается скрытый контент.
Таким образом, они просто скрывают <ul>
элементы, которые отображаются с помощью jQuery slideToggle();
У меня проблема в том, что когда я делаю это, мне физически приходится прокручивать страницу.Как заставить окно прокручиваться самостоятельно?
Я пытался использовать scrollTo, но это не помогло.
Возможно, это вызывает div, в котором находится нижний колонтитул?
<div id="navigation">
<ul>
<li>
<p onclick="showdivs('news');">
+ News</p>
<ul id="news" class="subitems" style="width: 94px;">
<li>Item #1</li>
<li>Item #2</li>
</ul>
</li>
</ul>
</div>
Javascript - я знаю, что могу просто сделать это с событием .click:
function showdivs(id) {
jQuery('.subitems').hide();
jQuery('#' + id).slideToggle('slow');
}
CSS:
#navigation
{
width: 100%;
height: 30px;
background: #f2f2f2;
}
#navigation ul
{
text-decoration: none;
display: block;
padding: 5px 8px;
background-color: #e5e5e5;
font-family: arial;
font-size: 10px;
font-weight: bold;
color: #808080;
width: auto;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #f2f2f2;
}
#navigation ul li
{
display: inline;
height: 30px;
float: left;
list-style: none;
margin-left: 15px;
position: relative;
background: #f2f2f2;
}
#navigation li p
{
background-color: #f2f2f2;
color: #009;
text-decoration: none;
}
#navigation li p:hover
{
text-decoration: underline;
}
#navigation li a
{
text-decoration: none;
background: #f2f2f2;
}
#navigation li a:hover
{
text-decoration: underline;
}
#navigation li ul
{
margin: 0px;
padding: 0px;
display: none;
position: absolute;
left: 0px;
top: 25px;
background-color: #f2f2f2;
}
#navigation li li
{
list-style: none;
display: list-item;
}
#navigation li li a
{
text-align: left;
font-size: 9px;
max-width: 120px;
background-color: #f2f2f2;
background-repeat: no-repeat;
background-position: 50% 100%;
background-image: url(../images/line.png);
}
#navigation li li a:hover
{
background-color: #f2f2f2;
color: #000;
-moz-border-radius: 5px;
}