#javascript #jquery
#javascript #jquery
Вопрос:
Я пытаюсь создать простой вложенный список, который будет чем-то похож на это изображение.На изображении основной список находится слева, и если есть какой-либо подсписок, он появится справа при наведении курсора мыши.
ссылка на то, что я пытаюсь, выглядит следующим образом -пример в jsfiddle вы можете увидеть Здесь Проблема, с которой я сталкиваюсь, заключается в
Q1 Подсписок нелегко перемещаться, если вы наведете курсор мыши с первого списка на второй и на третий, весь список исчезнет. поведение не согласовано, возможно, из-за дизайна.
Q2. На моей главной странице, где я должен его интегрировать, он продолжает нажимать на все элементы под ним, как я могу с этим справиться.
Q3. Прямо сейчас список отображается как обычный вложенный список, любая помощь по созданию / отображению рядом, как на прикрепленном изображении
для справки я также помещаю коды здесь.
<ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;">
<li><span><em>List</em></span>
<ul id="liststart" style="display: none;position:absolute;padding:2px 2px 10px 2px;top:20px;left:190px;text-align:justify" class="search-menu">
<li> <a>First</a>
<ul >
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li> Second
<ul >
<li><a>2.1</a></li>
<li>2.2</li>
</ul>
</li>
<li> Third
<ul >
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Javscript:
jQuery('#ScatList').hover(function() {
jQuery('#liststart').show(400);
}, function() {
jQuery('#liststart').hide();
});
jQuery('#liststart >li').hover(function() {
jQuery(this).find('ul').show(400);
}, function() {
jQuery(this).find('ul').hide();
});
jQuery('#liststart >li> ul').hide();
Комментарии:
1. Пожалуйста, кто-нибудь, отформатируйте его, чтобы первый список отображался встроенным, я пытался отформатировать его, чтобы поместить в виде кода, но не удалось.
2. На случай, если вы делаете это не для того, чтобы учиться, а вам просто нужно что-то, что будет работать, есть плагин jquery : users.tpg.com.au/j_birch/plugins/superfish
3. проблема
Superfishв том, что его следует использовать просто как дополнение к уже работающему меню4. @claresuzy Спасибо за редактирование, как вы это делаете, я пытался вставить в **` ** (отметьте), но не получилось
Я делаю это для работы и, возможно, не собираюсь работать с подключаемым модулем, а не по какой-либо конкретной причине, но, если это невозможно в противном случае, изображение, которое я прикрепил, является рабочей версией без плагина, которую я знаю.
5. @JohnP Superfish также очень хорош в точности с тем внешним видом, который я прикрепил, но я воспользуюсь кодом, предложенным @Marcus Ekwall, поскольку мои потребности достаточно просты. Спасибо.
Ответ №1:
Возможно, для этого вам пригодится мой минималистичный навигационный плагин. Вы можете свободно использовать код и изменять его по своему вкусу.
Комментарии:
1. Спасибо, чувак, это хорошо, я искал похожую структуру. Еще раз спасибо.
2. привет, я столкнулся с некоторой проблемой по вашей ссылке на скрипку, у меня тот же css, но он не работает в IE7, 8 оба подменю всегда остаются скрытыми, любая помощь была бы оценена, спасибо.
3. @rain, я не тестировал это в версии до IE9. Я не буду делать его совместимым с IE9, потому что это непродуктивно. Если вам нужно, чтобы это работало в IE7 / 8, вам придется внести необходимые изменения / исправления самостоятельно. Если вы спросите меня, людям и компаниям нужно научиться обновляться
4. спасибо, понял, что-то связанное с doctype. я поместил его и он работает
5. Привет, еще раз у меня проблема в IE с режимом quirks по какой-то причине, я не могу его изменить, не могли бы вы, пожалуйста, взглянуть на измененную ссылку jsfiddle.net/rainbow99984/8qu4d/1 он отлично работает в Firefox, chrome, но не в IE, если изменить doctype, то он работает, но мне не разрешено изменять doctype. любая причина или исправление, почему вложенный список не отображается. еще раз спасибо.