2012-03-07 2 views
0

Я разработал довольно обычную тему для Wordpress, и я пытаюсь реализовать раскрывающееся меню для моей основной навигации. Я создал навигационную структуру с помощью CSS и небольшим количеством JQuery. Он отлично работает, когда я тестирую его на статической HTML-странице, но когда я его реализую в WP, подменю не отображается.Не удается получить раскрывающееся меню, работающее в Wordpress 3

Вот CSS для нав:

#topnav { clear:both ; width:1000px ; height:52px ; margin:auto ; background:url(images/topnav-bg.png) repeat-x ; position:relative ; top:0px ; right:0px ; z-index:9999 } 

.jsddm 
{ margin: 0; 
padding: 0 ; 
float:right ; 
} 

.jsddm li 
{ float: left; 
list-style: none; 
font: 20px Tahoma, Arial; 
margin-right:35px ; 
margin-bottom:15px } 

.jsddm li a 
{ display: block; 
color: #ffffff; 
white-space: nowrap} 

.jsddm li a:hover 
{color:#6ec7fb} 

.jsddm li a:active 
{color:#6ec7fb} 

li.current_page_item a { color:#6ec7fb } 

.jsddm li ul 
{ margin: 0; 
    margin-top:-1px ; 
    position: absolute; 
    visibility: hidden;} 

.jsddm li ul li 
{ float: none; 
    display: inline} 

.jsddm li ul li a 
{ width: auto; 
    background: #002D56 ; 
    color:#ffffff ; 
    font-size:16px ; 
    line-height:20px ; 
    padding:5px} 

.jsddm li ul li a:hover 
{ background: #015098 ; 
color:#ffffff } 

и вот Javascript:

var timeout = 500; 
var closetimer = 0; 
var ddmenuitem = 0; 

function jsddm_open() 
{ jsddm_canceltimer(); 
    jsddm_close(); 
    ddmenuitem = $(this).find('ul').css('visibility', 'visible');} 

function jsddm_close() 
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function jsddm_timer() 
{ closetimer = window.setTimeout(jsddm_close, timeout);} 

function jsddm_canceltimer() 
{ if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null;}} 

$(document).ready(function() 
{ $('.jsddm > li').bind('mouseover', jsddm_open) 
    $('.jsddm > li').bind('mouseout', jsddm_timer)}); 

document.onclick = jsddm_close; 

Сайт (в разработке) здесь: http://s3.mynewsitereview.com/

+0

В WordPress, чтобы избежать проблем с противоречивыми фреймворками javascript, вы должны перейти от '$ (document) .ready (function() ...' to 'jQuery (document) .ready (function ($) ...' (что позволит вам использовать $ стенографию внутри функции, но предотвращать конфликты с прототипом и т. д.) –

ответ

0

функция не выполнения. Вы можете увидеть это в firebug главным образом потому, что CSS, добавленный через JQuery, добавлен в строку, и когда вы не наведете ничего, ничего не произойдет. Проблема заключается в селекторе. jsddm - div, а li не является прямым ребенком. Попытка:

$('.jsddm > ul > li') 

Я не пробовал, но это должно быть так.

+0

Спасибо! Это сработало отлично! – Cynthia

Смежные вопросы