Question

首先，我是法国人，所以请原谅我可能的英语错误...... ;-) 其次，我对（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&nbsp;: respect des normes, confort, longevite des equipements&hellip;</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&nbsp;: 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

请帮助我，这让我疯了！

感谢您的帮助，大卫

Answer 1

还有一个问题，为什么要在window.location中设置哈希？

您可以轻松强制“点击”导航中的手风琴项目。

$("something").click()＆lt; - 将强制点击该项目，所有事件都将按照已知的方式处理。

我试过了

$(".ui-accordion .ui-accordion-header:nth(1)").click()

并且有效

“nth（1）”只是测试，因为你只需要，你可以传入0或1，或者你做一个自定义的方法，如

function openTab(name) {
$(".ui-accordion .ui-accordion-header[href=#" + name + "]").click()
}

我们喜欢openTab("extension");

顺便说一下。这个：window.location=window.location.href.split('#')[0];正在刷新整页！

jQuery UI Accordion：从顶部菜单打开面板并关闭打开的面板

1 个答案: