вопрос о jQuery от человека, который не может JavaScript
Таким образом, я пытаюсь адаптировать это Выпадающее меню на Joomla, который стили работают отлично как ожидалось, таким образом, я отправлю JavaScript, включает в главу моего веб-сайта:
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/dropdown.js'></script>
<script type='text/javascript'>
$(function() {
$('.menu').droppy();
});
</script>
<script type='text/javascript'>
$(function() {
$('.menu').droppy({speed: 100});
});
</script>
хорошо я не знаю, почему не работает, я отправлю dropdown.js, я должен отправить jQuery также? это является действительно большим!
$.fn.droppy = function(options) {
options = $.extend({speed: 250}, options || {});
this.each(function() {
var root = this, zIndex = 1000;
function getSubnav(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var subnav = $('> ul', ele);
return subnav.length ? subnav[0] : null;
} else {
return ele;
}
}
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
}
function hide() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', false);
setTimeout(function() {
if (!$.data(subnav, 'cancelHide')) {
$(subnav).slideUp(options.speed);
}
}, 500);
}
function show() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', true);
$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
}
$('ul, li', this).hover(show, hide);
$('li', this).hover(
function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
);
});
};
Мой вопрос здесь: Почему это не работа! Я знаю, что это действительно сложно (я ничего не делаю о JavaScript), но если Вы поможете мне, то я отправлю учебное руководство и отредактированные файлы, которые помогут большому количеству людей!
По тому, как я имею, загружают jQuery с исходного сайта, таким образом, я не думаю, что это может быть проблемой!
Заранее спасибо!
Вот HTML, сгенерированный от 2 сезамов уровней УЛ.:
<div id="topmenu">
<div class="moduletabledropdown">
<ul class="menu">
<li id="current" class="first level0 home active"><a href="http://www.mundosoftware.com.br/templatex/" title="Home"><span>Home</span></a></li>
<li class="level0 parent faq"><a href="/templatex/index.php?option=com_content&view=section&id=3&Itemid=41" title="FAQ"><span>FAQ</span></a><ul class="level1">
<li class="first last level1 item-01"><a href="http://www.google.com" title="Item 01"><span>Item 01</span></a></li></ul></li>
<li class="level0 parent the-news"><a href="/templatex/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50" title="The News"><span>The News</span></a><ul class="level1"><li class="first last level1 item-02"><a href="http://www.google.com" title="Item 02"><span>Item 02</span></a></li></ul></li>
<li class="level0 web-links"><a href="/templatex/index.php?option=com_weblinks&view=categories&Itemid=48" title="Web Links"><span>Web Links</span></a></li><li class="last level0 parent news-feeds"><a href="/templatex/index.php?option=com_newsfeeds&view=categories&Itemid=49" title="News Feeds"><span>News Feeds</span></a><ul class="level1"><li class="first last level1 item-03"><a href="http://www.google.com" title="Item 03"><span>Item 03</span></a></li></ul></li></ul></div>
Вот HTML для страницы, которая действительно работает чистый HTML CSS:
<html>
<head>
<title>droppy - Nested drop down menus</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type='text/javascript' src='assets/jquery.js'></script>
<link rel="stylesheet" href="assets/project-page.css" type="text/css" />
<!-- per Project stuff -->
<script type='text/javascript' src='javascripts/jquery.droppy.js'></script>
<link rel="stylesheet" href="stylesheets/droppy.css" type="text/css" />
<!-- END per project stuff -->
</head>
<body>
<div id='container'>
<h1>
droppy
<span class='subtitle'> - Nested drop down menus</span>
</h1>
<div id='sidebar'>
<ul id='project-nav'>
<li><a href='#overview'>Overview</a></li>
<li><a href='#example'>Example</a></li>
<li><a href='#usage'>Usage</a></li>
<li><a href='#download'>Download</a></li>
<li><a href='#known-issues'>Known Issues</a></li>
</ul>
<ul id='ohoa-nav'>
<li><a href='http://onehackoranother.com/projects/'>Back to projects »</a></li>
<li><a href='http://onehackoranother.com/'>Back to onehackoranother.com »</a></li>
</ul>
<a href='http://thepixeltrap.com' id='pixel-trap' title='The Pixel Trap: New Directory for Web Professionals'>
<img src='http://onehackoranother.com/images/pixel-16.png' alt='' /> The Pixel Trap - A New Directory for Web Professionals
</a>
</div>
<div id='main'>
<h2 class='first' id='overview'>Overview</h2>
<p>Quick and dirty nested drop-down menu in the jQuery styleee. I needed a nav like
this for a recent project and a quick Googling turned up nothing that really suited,
so droppy was born. It hasn't been designed with flexibility in mind - if you like
what you see, great, integration should be a breeze - otherwise I'd look for something
more configurable elsewhere.</p>
<h2 id='example'>Example</h2>
<ul id='nav'>
<li><a href='#'>Top level 1</a></li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2 - 1</a></li>
<li>
<a href='#'>Sub 2 - 2</a>
<ul>
<li>
<a href='#'>Sub 2 - 2 - 1</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2 - 2 - 2</a></li>
<li>
<a href='#'>Sub 2 - 2 - 3</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2 - 3</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
$(function() {
$('#nav').droppy();
});
</script>
<h2 id='usage'>Usage</h2>
<p>No mandatory configuration options or nothin' here, just use include the Javascript/CSS
resources and insert the following code in your document head, or any other
suitable place:</p>
<div class='caption'>Javascript:</div>
<pre><script type='text/javascript'>
$(function() {
$('#nav').droppy();
});
</script></pre>
Не возражайте против открытых отделений, который не является полным кодом!
2 ответа
Можете ли вы опубликовать HTML-код раскрывающегося меню?
Прямо сейчас вы применяете дроппи-плагин к селектору '.menu', который ищет на вашей странице элемент, имеющий класс CSS 'menu', это то, что вы хотели? Если вы хотите применить раскрывающийся список к элементу с id = "menu", вы должны использовать $ ('# menu').
Обновление
Я бы порекомендовал использовать superfish вместо этого, механику выпадающих меню действительно сложно понять, чтобы сделать меню более простыми в использовании. Superfish отлично умеет прощать посетителей.
Я не могу найти ничего особенно неправильного в коде, вроде работает нормально. Единственное изменение, которое мне нужно было сделать, чтобы заставить его работать, - это изначально установить скрытые подменю с помощью CSS. Попробуйте это, вам нужно будет снова добавить свой CSS в HTML. Я бы предложил использовать Firefox, Firebug и Firequery . Это даст вам представление о том, что именно ломается, если есть какие-либо ошибки JavaScript.
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.droppy.js"></script>
<style>
ul#nav li ul {
display: none;
}
</style>
</head>
<body>
<h2 id='example'>
Example</h2>
<ul id='nav'>
<li><a href='#'>Top level 1</a></li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2 - 1</a></li>
<li><a href='#'>Sub 2 - 2</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2 - 2 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2 - 3</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$('#nav').droppy();
});
</script>
</body>
</html>
Поскольку ваш блок