#jquery-ui
#jquery-пользовательский интерфейс
Вопрос:
Я использую демонстрационный пример jQueryUI и пытаюсь добавить эффект открытия при наведении курсора мыши и закрыть все li при запуске. но по какой-то причине он выполняет только свернутый по умолчанию 1 и щелкает, чтобы свернутьhttp://jqueryui.com/demos/accordion/#mouseover
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
Ответ №1:
Для инициализации аккордеона требуется два вызова:
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });
Вот почему mouseover
эффект не работает. Чтобы объединить параметры в один вызов инициализации:
$("#accordion").accordion({ header: "h3", event: "mouseover" });
Кроме того, если вы хотите, чтобы все разделы были свернуты изначально, добавьте active
параметр и установите для него значение false:
$("#accordion").accordion({
header: "h3",
event: "mouseover",
active: false
});
Вот рабочий пример: http://jsfiddle.net/HjK5T /