Прежде всего, я француз, поэтому, пожалуйста, прости мои возможные ошибки в английском ... ;-)
Во-вторых, я неплохо разбираюсь в (x) HTML и CSS, но я абсолютный новичок в jQuery.
Я пытаюсь настроить JQuery UI Accordion, который позволил бы:
- открытие панели при нажатии на ее заголовок (сделано)
- закрытие этой открытой панели при повторном щелчке по ее заголовку (не сделано)
- открытие определенной панели в соответствии с хэштегом в URL (сделано)
- изменение хэштега в URL при открытии другой панели (готово)
- удаление хэштега в URL при закрытии открытой панели (не грязно, но готово)
- открытие панели при нажатии на ссылку в верхнем меню страницы (не сделано, несмотря на долгие часы попытки заставить ее работать)
Как видите, мне удалось удовлетворить некоторые из моих потребностей, но я просто не могу понять, как решить последние два вопроса, которые, как напоминание, таковы:
- закрыть эту открытую панель при повторном щелчке по ее заголовку: согласно документации, опция collapsible: true должна была сделать все нормально ... но это не так - или, может быть, я реализовала ее неправильно?
- открытие панели при нажатии на ссылку подменю в верхнем меню страницы: кто-нибудь знает, возможно ли это сделать? Как это возможно?
Любая помощь в этом была бы очень признательна. Вот мой пример кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" http-equiv="Content-Language" content="fr-FR" />
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
<title>Votre projet</title>
</head>
<body class="page">
<div id="content">
<div id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li class="current"><a href="test.html">Votre projet</a>
<div>
<ul>
<li><a href="test.html#extension" class="accordion">Extension</a></li>
<li><a href="test.html#renovation">Renovation</a></li>
</ul>
</div>
</li>
<li><a href="#">Mes services</a></li>
<li><a href="#">Partenaires</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<a href="http://apycom.com"></a>
</div>
<div class="main">
<div id="projet">
<a name="extension" id="extension"></a>
<!-- ACCORDION HEADER -->
<a class="accordion title" href="#extension" title="Afficher / masquer les details pour Extension">Extension</a>
<!-- ACCORDION CONTENT -->
<div>
<p>Pour construire un batiment neuf ou integrer une extension a une construction existante, il est essentiel de s'entourer de professionnels competents.</p>
<p>Dans le domaine de l'electricite, les imperatifs sont multiples : respect des normes, confort, longevite des equipements…</p>
</div>
<a name="renovation" id="renovation"></a>
<!-- ACCORDION HEADER -->
<a class="accordion" href="#renovation" title="Afficher / masquer les details pour Renovation">Renovation</a>
<!-- ACCORDION CONTENT -->
<div>
<p>Dans le cadre d'un projet de renovation, un soin particulier doit etre apporte à l'electricite. Une belle installation electrique est une installation qui ne se voit pas : l'exercice requiert un savoir-faire tout particulier, au travers de solutions adaptees au bati. En renovation, le chauffage electrique est par exemple le seul moyen d'obtenir une installation performante sans avoir a effectuer de gros travaux.</p>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<!-- JQuery -->
<!-- jQuery Google CDN hosted with local fallback -->
<!-- Weird doc.write slashes explained here http://www.codehouse.com/javascript/articles/external/ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write('<script src="', 'js/jquery.js', '" type="text/JavaScript"><\/script>');
}
</script>
<!-- Accordion -->
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(
function(){
$(".accordion").click(function(event){
if (!$(this).hasClass('selected')){
$(this).addClass("selected");
window.location.hash=this.hash;
}
else if ($(this).hasClass('selected')){
$(this).removeClass('selected');
window.location=window.location.href.split('#')[0];
}
});
$('#projet').accordion({
autoHeight: false,
navigation: true,
collapsible: true,
active: false,
header: '.accordion'
});
});
</script>
<!-- Menu -->
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
И живая страница на тот случай, если она вам понадобится: http://davidgmmartin.free.fr/accordion/test.html
Пожалуйста, помогите мне с этим, это сводит меня с ума!
Спасибо за вашу помощь,
David