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

发布于 2024-10-16 09:36:30 字数 5873 浏览 6 评论 0原文

首先，我是法国人，所以请原谅我可能出现的英语错误......;-) 其次，我在 (x)HTML 和 CSS 方面还不错，但我在 jQuery 方面绝对是初学者。

我正在尝试设置一个 jQuery UI 手风琴，它允许： - 单击标题时打开面板（完成） - 重新单击标题时关闭此打开的面板（未完成） - 根据 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

请帮我解决这个问题，这让我发疯！

感谢您的帮助，大卫

原文

First of all, I am French, so please forgive my possible English mistakes... ;-)
Second, I'm not too bad at (x)HTML and CSS, but I'm an absolute beginner in jQuery.

I'm trying to set up a jQuery UI Accordion that would allow:
- opening a panel when clicking its header (done)
- closing this open panel when re-clicking its header (not done)
- opening a specific panel according to a hashtag in the URL (done)
- changing the hashtag in the URL when another panel is opened (done)
- removing the hashtag in the URL when closing an open panel (dont, quite dirty but done)
- opening a panel when clicking a link in the page's top menu (not done, in spite of looooong hours trying to make it work)

As you can see, I've managed to address some of my needs, but I just can't figure out how to solve the last two - which, for reminder, are:
- closing this open panel when re-clicking its header: according to the documentation, the collapsible: true option should have made it OK... but it didn't - or maybe I implemented it the wrong way?
- opening a panel when clicking a submenu link in the page's top menu: does anybody know if/how that would be possible?

Any help on that would be really appreciated. Here's my code sample:

<!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>

And a live page in case you might need it: http://davidgmmartin.free.fr/accordion/test.html

Please help me with this, it's driving me nuts!

Thanks for your help,
David

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞陪衬 2024-10-23 09:36:30

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

您可以轻松地在导航中强制“单击”手风琴项目。

$("something").click() <-- 将强制单击该项目，所有事件都将按已知方式进行处理。

我尝试了一下

$(".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 ");

顺便说一句。 this: window.location=window.location.href.split('#')[0]; 正在刷新整个页面！

One more question, why are you setting the hash in the window.location?

you could easily force the "click" for the accordion item in the navigation.

$("something").click() <-- will force the item to be clicked, all events will be handled as known.

I tried this out

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

and it works

the "nth(1)" is just testing, since you have just to, you can pass in 0, or 1, or you make a custom method like

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

us it like openTab("extension");

Btw. this: window.location=window.location.href.split('#')[0]; is making a full page refresh!

回复收藏 0 原文

~没有更多了~

关于作者

鱼忆七猫命九

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

束缚ｍ

alipaysp_VP2a8Q4rgx

α

一口甜

厌味

转身泪倾城

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

束缚ｍ

alipaysp_VP2a8Q4rgx

α

一口甜

厌味

转身泪倾城

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。